📚 Cheatsheet

Une collection organisée de snippets de code pour accélérer votre développement. Parcourez, recherchez et copiez en un clic.

Snippets 10

Retour
Le hook useCallback
Avancé 
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
Le hook useContext
Intermédiaire 
import { useContext } from 'react';
import MyContext from './MyContext';

const value = useContext(MyContext);
Le hook useEffect (effet de bord)
Facile 
import { useEffect } from 'react';

useEffect(() => {
  document.title = `Vous avez cliqué ${count} fois`;
});
Le hook useMemo
Avancé 
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Le hook useReducer
Avancé 
const [state, dispatch] = useReducer(reducer, initialState);
Le hook useRef
Intermédiaire 
import { useRef } from 'react';

const inputEl = useRef(null);
const onButtonClick = () => {
  inputEl.current.focus();
};
Le hook useState
Facile 
const [valeur, setValeur] = useState(valeurInitiale);
useEffect avec un tableau de dépendances
Intermédiaire 
useEffect(() => {
  // S'exécute seulement si `count` change
}, [count]);
useEffect avec une fonction de nettoyage
Avancé 
useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Nettoyer l'abonnement
    subscription.unsubscribe();
  };
}, [props.source]);
useEffect pour un montage unique (comme componentDidMount)
Intermédiaire 
useEffect(() => {
  // S'exécute une seule fois après le premier rendu
}, []);