UI composition: instead of composing functions together to get some value, you can compose components together to some UI.

non-visual composition: it is not uncommon to compose and reuse non-visual logic as well as, and this is the fundamental problem that React Hooks were created to solve.

useState: create a value that is preserved across renders and trigger a re-render when it changes.

useEffect: synchronise a component with some external system.

useRef: create a value that is preserved across renders but won't trigger a re-render when it changes.

useContext: get access to what was passed to the context's provider.

useReducer: create a value that is preserved across renders and trigger a re-render when it changes, using the reducer pattern.

useMemo: cache a result of a calculation between renders.

Use callback: cache a function between renders.

uselayouteffect: synchronous a component with some external system before the browser paints the screen.

useSyncExternalStore: subscribe to an external store. allow you to subscribe to the state that is managed outside of React, and trigger a re-render whenever that state changes.

useEffectEvent: encapsulate a side effect that synchronises your component with some outside system.

There are only two hard things in computer science: cache invalidation and naming things.

complexity:

• useEffect is confusing.
• Context often becomes confusing over time.
• Combining useState, useEffect, and context together in an attempt to manage state will lead to pain and suffering.
• We're treating asynchronous state as if it were synchronous state.