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:

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