Skip to main content


Intermediate React

  • useState container for state within component (instance props). Use a store for data.

  • useEffect Update render callback; update when something happens - async events. It's scheduled and you don't know when its going to run

  • useContext globall application state (globals) and make it available specifically

  • useRef container for state reference outside of the application scope (modals, subscriptions) aka static class properties exists across class instances. Referring to dom elements within react application

  • useReducer similar to filter, pass in state run it through reducer and return state. Good for testing. Decoupling state from display layer

  • Redux good for managing global state. Use useState for inner-component state.

  • Object.assign differential updating

  • useMemo caching expensive computation preventing re-render only on change. For specific use cases. Have performance problems before using this

  • useCallback implemented with useMemo. Takes in a function and a dependency, returns the same function so does not cause rerender.

  • memo continue only when props change, for functional components

  • useLayoutEffect similar to class component componentDidUpdate: happens immediately after your render finishes. Suitable for animation or measuring the dom

  • useImperativeHandle very rare, useful for library authors. Exposes a function to the parent component.

  • useDebugValue Add information readable by React Dev Tools in the DebugValueComponent. Console log for custom hook

  • tailwind skipped

  • redux :

    • state tree. React sends actions and reads state from redux.

    • useDispatch: query the storeh

  • test:

    • test from the user perspective, button changed x to y

    • test features that are important to your app

    • test that fails on the bug, then make that test pass by fixing the bug.

    • No tests are better than bad tests (which take away confidence)

  • Higher Order Component: reusable logic