Cheatsheet
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)
: reusable logic