React - miscellaneous notes

General notes

Hints

• treat components like pure functions and don’t modify props

Terms

Reconcililation

https://reactjs.org/docs/reconciliation.html

• React implements a heuristic O(n) algorithm to compare rendered tree nodes
• Two elements of different types will produce different trees
• The developer can hint at which child elements may be stable across different renders with a key prop
• When a component updates, the instance stays the same, so that state is maintained across renders
• Keys should be stable, predictable, and unique. Unstable keys (like those produced by Math.random()) will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components

Prop drilling

Passing props through a component tree, not a good pattern in most cases:

Props drilling example

Context

Context is a way to essentially create global variables that can be passed around in a React app so no prop drilling would be needed.

Context is often touted as a simpler, lighter solution to using Redux for state management.

Testing

Snapshot testing

• To make our tests really useful, we should run them before each commit. So we can be sure, that we didn’t break anything accidentally. For example _husky_ package can help to setup and run pre-commit hooks.
• The snapshot tests become really powerful when you are working on larger application or multiple developers are working on the same codebase.
• Life examples when snapshot tests fail are available here in the section “Typical regressions”: https://medium.com/simply/snapshots-painless-testing-of-react-components-6bce3c4d51fc