React Hooks Avances : useCallback, useMemo, useReducer

React Hooks Avances

Au-dela de useState et useEffect, React offre des hooks puissants pour optimiser vos applications.

useCallback

Memorise une fonction pour eviter les re-renders inutiles :

const handleClick = useCallback(() => {
  console.log(count);
}, [count]);

useMemo

Memorise une valeur calculee couteuse :

const total = useMemo(() => {
  return items.reduce((sum, item) => sum + item.prix, 0);
}, [items]);

useReducer

Alternative a useState pour les etats complexes :

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const [state, dispatch] = useReducer(reducer, { count: 0 });

useRef

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);

return <input ref={inputRef} />;

Custom Hooks

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}