React: errori da non fare utilizzando gli hook

L’introduzione degli hook di React ha semplificato e reso più leggibile gran parte del codice di React. Gli hook sono delle funzioni JavaScript ma hanno delle regole ben precise che vanno rispettate per evitare di incappare in errori.

Vediamone alcuni assieme.

Indice dei contenuti

• Utilizzare gli hook fuori da funzioni di React
  • hook dentro una funzione generica
• Utilizzare gli hook dentro loop, funzioni annidate o in modo condizionale Example
  • hook dentro un hook
  • hook condizionale
• Conclusioni

Utilizzare gli hook fuori da funzioni di React

L’errore che di solito appare in console è:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons... react-hooks/rules-of-hooks

oppure

React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

oppure anche

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks

Una volta che iniziamo ad utilizzare gli hook la tentazione di utilizzarli ovunque ci fa pare è forte. Putroppo non possono essere utilizzati fuori da quelli che sono i componenti o funzioni di React.

Possiamo utilizzare gli hook internamente a:

• Componenti di React
• Eventuali Hook custom che scriviamo

Codice di esempio: hook dentro una funzione generica

import { useEffect, useState } from 'react';

// funzione di esempio, usa hook ma non potrebbe
const BuggedFunction = () => {
  const [state, setState] = useState(0);

  return state
}

function App() {
  useEffect(() => {
    BuggedFunction() // invoco la funzione
  }, [])

  return (
    <div className="App">
      Example component
    </div>
  );
}

export default App;

Risultato nel browser

Utilizzare gli hook dentro loop, funzioni annidate o in modo condizionale

L’errore che di solito appare in console è:

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

Gli hook vanno sempre eseguiti nel componente principale, nello stesso ordine e sempre tutti. Questo permette a React di poter conoscere e gestire in modo corretto i vari stati dei componenti tra i vari render che vengono fatti. Cambiando l’ordine o la presenza o meno di un hook rompiamo questa regola e React non sa come gestire questa situazione, emettendo l’errore in console.

Codice di esempio: hook dentro un hook

function App() {
  useEffect(() => {
    const [state, setState] = useState(0); // hook dentro un hook
  }, [])

  return ( 
    <div className="App">
      Example component
    </div>
  );
}

Risultato nel browser

Codice di esempio: hook condizionale

function App(props) {
  if (props.variable) { // richiamo un hook in base al valore di una variabile
    const [state, setState] = useState(0);
  }

  return ( 
    <div className="App">
      Example component
    </div>
  );
}

Risultato nel browser

Conclusioni

Gli errori visti sopra sono abbastanza chiari e i messaggi che appaiono in console indicano correttamente a che punto del codice è avvenuto uno specifico errore.

Inoltre, sempre nella console del browser, trovare sotto questi errori i riferimenti alla guida ufficiale di React.

L’importante e iniziare con calma a leggere e comprendere i messaggi.