React 16.8 est sorti

Date de sortie : 16 février 2019

Documentation officielle : React v16.8.0

Cette release va changer votre façon d’écrire du React. Les Hooks permettent enfin d’utiliser state et effets dans les composants fonctionnels, sans jamais écrire le mot class. La communauté React en rêvait depuis des années.

Les nouveautés principales

Les Hooks — la fin des classes

Les Hooks permettent d’utiliser state et effets dans les composants fonctionnels :

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Fini les classes pour gérer l’état !

useState — état local

const [value, setValue] = useState(initialValue);

// Avec fonction d'initialisation
const [items, setItems] = useState(() => expensiveComputation());

useEffect — effets de bord

Remplace componentDidMount, componentDidUpdate et componentWillUnmount :

useEffect(() => {
  const subscription = subscribe(id);

  // Cleanup (équivalent componentWillUnmount)
  return () => subscription.unsubscribe();
}, [id]);  // Dépendances

useContext — consommer un contexte

const theme = useContext(ThemeContext);
const user = useContext(UserContext);

useReducer — logique d’état complexe

Pour les états avec plusieurs sous-valeurs :

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

dispatch({ type: 'increment' });

useMemo et useCallback — mémoïsation

const memoizedValue = useMemo(() => compute(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a), [a]);

useRef — références et valeurs mutables

const inputRef = useRef(null);
const previousValue = useRef(value);

Règles des Hooks

1. Appeler les Hooks au niveau supérieur (pas dans des conditions)
2. Appeler les Hooks uniquement depuis des composants React

Pourquoi les Hooks ?

• Code plus réutilisable (custom hooks)
• Plus facile à tester
• Moins de boilerplate que les classes
• Meilleure colocation de la logique liée

À retenir

Les Hooks sont probablement le changement le plus important dans React depuis son lancement. Si vous écrivez encore des composants avec class, il est temps de passer aux fonctions. Votre futur vous en sera reconnaissant.