React hooks overview

React hooks overview.

• useState: set initial state directly. Or use a function to set the initial state to avoid calls on every re-render. Functions calling state should get the previous state & then update.
• useEffect: used for side effects like invoking APIs. Add a return function to be called to cleanup, such as removing an event listener.
• useMemo: Use to memoize. Such as for a slow function. Stores a previous value. Can also be used to compare objects (referential 'equality'), and avoid unnecessary updates.
• useRef: Can refer to components. Normally, use state instead to handle updates. Use only if you have to. Can also be used to store values without causing re-renders (but using state can cause re-renders).
• useContext: Store data that can passed between components without needing to pass down the props in a hierarchy.
• useReducer: Use dispatch to write cleaner code & passing down fewer event handlers.
• useCallback: Use to memoize function.

References:

https://youtu.be/O6P86uwfdR0