Wk-notes-02-04-props-drilling-virtual-list

Props drilling

It's a nightware for maintainance. For example:

• Refactor the shape of some data, w/ nested structure, can be easily solved by ts

• (Over-forwarding props) Passing more props than is necessary, when moving/refactoring around the nested component

• (Under-forwarding props) Abusing defaultProps and miss some props, can be solved with ts

• Renaming props halfway through

Thoughts: ts can be a big help to these problems, being a guard and enabling intellisense to reduce the issues and complexity. The problems can still be there hidden, ts makes the process easier for dev but cannot guarantee good code, so maybe it's better to have a good code ability first.

Solution:

• Better structure, for components layer, for state management layer, (probably useless advice)

• ContextAPI, really good cos it's like a redux out of box

Virtual List #1

Ref: https://blog.logrocket.com/windowing-wars-react-virtualized-vs-react-window/

Ref: https://blog.logrocket.com/rendering-large-lists-with-react-virtualized-82741907a6b3/

Ref: https://addyosmani.com/blog/react-window/

Ref: https://web.dev/virtualize-long-lists-react-window/