React #

Single Source of Truth #

State Co-Location #

State Composition #

Referential Integrity of Props #

• via 'useMemo' / 'useCallback'
• via 'useState' / 'useReducer'
• via 'useRef'

Special props: ref, key, children

Initialize / Reset Component #

Higher-Order Dual-Context #

Fetch Data #

Manage Effects #

• Eliminate Dependencies
• Do not set state directly

Must know libraries #

• Styling
  • Stylesheet Generators
    • bootstrap (Sass / Scss)
    • tailwind
    • vanilla-extract
  • Styled Components
    • css-modules
    • styled-components
    • emotion.js
• Iconography
  • Sprites
  • SVG
• State Management Libraries
  • Redux
  • Recoil / Zustand
  • RTK / Apollo
• Routing Libraries
  • React-Router
• Component Libraries
  • React-Bootstrap
  • Ant Design
  • MUI
• Functionality Libraries
  • Formik
  • Framer Motion
  • RxJS

Further Reading #

• https://react.dev/learn/scaling-up-with-reducer-and-context
• https://react.dev/learn/synchronizing-with-effects
• https://react.dev/learn/you-might-not-need-an-effect
• https://react.dev/learn/removing-effect-dependencies
• https://react.dev/learn/separating-events-from-effects
• https://react.dev/learn/lifecycle-of-reactive-effects