There are 3 rules for hooks:
- Hooks can only be called inside React function components.
- Hooks can only be called at the top level of a component.
- Hooks cannot be conditional
useState#
to track state in a component
const [state,setState] = useState(<initial state>)
updateState(newState) = setState( previousState => newState )
useEffect#
to perform side effects (e.g. fetching data, directly updating the DOM, and timers.)
useEffect(<function>, <dependency>)
Context#
createContext, useContext, <context-name>.Provider
to manage state globally
useRef#
allows to persist values between re-renders
to store mutable values and not to cause re-renders on updates
to have direct access to the DOM
useReducer#
is like useState, but allows to implement custom state logic
useReducer(<reducer>, <initial state>)
returns [<state>, <dispatch>]
useCallback#
returns a memoized callback function (that doesn’t need to be recalculated)
to isolate resource intensive functions so that they will not automatically run on every render
only runs when one of its dependencies update
function are recreated on each render, to prevent the function from being recreated unless necessary, use useCallback
useMemo#
returns a memoized value