React Hooks

1. Manage State

useState

const [count,setCount] = useState(initialCount);

useReducer

const [state,dispatch] = useReducer(
    reducer,
    intialState,
    intitialDispatch
);

2. Handling side effects

useEffect

useEffect(()=>{
    applyEffect(dependencies);
    return () => cleanupEffect();
},[dependencies]);

useLayoutEffect

useLayoutEffect(() => {
    applyBlockingEffect(dependencies);
    return cleanupEffect();
},[dependencies]);

3. Use the Context API

useContext

const ThemeContext = React.createContext();
const contextValue = useContext(ThemeContext);

4. Memoize everything

useMemo

const memoizedValue = useMemo(() => expensiveFn(dependencies), 
[dependencies]
);

useCallback

const memoizedCallback = useCallback(expensiveFn(dependencies),
[dependencies]
);

5. Use refs

useRef

const ref = useRef();

useImperativeHandle

useImperativeHandle(
ref,
creativeHandle,
[dependencies]);

6. Reusability

Extract reusable behavior into custom hooks.