Understanding React Hooks in a Concurrent World
-
useId
: generate a unique value consistently on the server & browser side. -
useMemo
&useCallback
: recalculate output when inputs change @ render time. -
useDeferredValue
: recalculate output to be input when any urgent updates have been committed. -
useState
: recalculate output when called @ render time. -
useReducer
: recalculate output when called @ any time. -
useEffect
: executed by React when inputs change @ commit time. -
useContext
: state external to this component provided by another component further up the tree. -
useRef
: mutable reference that can be changed @ any time. - View Official Hooks Reference
Parallel-Universe-Safe
useMemo
, useState
, useReducer
Each of these hooks hold state.
useRef
+ useEffect
const instRef = useRef(null);
let inst;
// Lazily initialize the ref the first time.
if (instRef.current === null) {
inst = {
value: null,
};
instRef.current = inst;
} else {
inst = instRef.current;
}
…
// Update the ref once value has been committed.
useEffect(() => {
inst.value = value;
}, [value]);