Les Hooks en React

Les hook sont apparus avec la version de React 16.8.

Le Hook UseState en ReactJS

Le hook UseState se charge du state dans les composants fonctionnels. Dans le composant de classe on avait :

this.setState(nouveauState)
#avec useState
const [state,setState] = useState(initialState)

Le hook useEffect

Il est l’équivalent de plusieurs fonction de cycle dans les composant de classe. Il remplace ComponentDidMount, ComponentDidUpdate.

#invocation au premier rendu
useEffect( () => {

},[])

#invocation au premier rendu et à chaque update du state
useEffect( () => {

},[variable])


#invocation uniquement à chaque update (et pas au premier chargement)

const isInitialMount = useRef(true);

useEffect(() => {
  if (isInitialMount.current) {
     isInitialMount.current = false; //grâce à cette astuce on bypasse l'exécution du code d'update au premier rendu
  } else {
      // le code pour chaque update
  }
});