Crochets react imbriqués exposant des références statiques

Question

Je cherchais l'implémentation de eslint-plugin-react-hooks et cela ressemble à useState 's setState y useReducer 's dispatch sont des références statiques qui n'ont pas besoin d'être déclarées dans le tableau des dépendances de l'interface utilisateur. useEffect .

Cependant, cette règle ne semble pas fonctionner correctement lorsque vous écrivez une règle personnalisée qui abstrait une logique interne. Par exemple, je crée un hook personnalisé :

const useCustom = () => {
    const [number, setNumber] = React.useState(0);
    return [number, setNumber];
};

qui est ensuite utilisé de la manière suivante :

const [number, setNumber] = useCustom();
React.useEffect(() => {
   if (something) {
       setNumber(1);
   }
}, [something]); // useEffect has a missing dependency: 'setNumber'

L'ajout de la dépendance au tableau ne semble pas entraîner de cycles de rendu supplémentaires. Cependant, cela soulève une autre question : Que se passe-t-il si mon hook renvoie une référence à une valeur renvoyée par la fonction useRef() serait-il possible de l'ajouter au tableau des dépendances ?

Answer 1

La valeur de useRef ne changera jamais, sauf si vous démontez et remontez le composant.

La modification de value.current n'entraînera pas un nouveau rendu du composant, mais si value.current est une dépendance de votre effet, votre effet sera relancé lorsque le composant sera rendu.

Je ne suis pas sûr que cela réponde à votre question, j'ai ajouté un exemple de code ci-dessous pour démontrer :

const useTimesRendered = () => {
  const rendered = React.useRef(0);
  rendered.current++;
  return rendered;
};
const useCustomRef = () => {
  const customRef = React.useRef(0);
  return customRef;
};
const App = () => {
  const rendered = useTimesRendered();
  const custom = useCustomRef();
  const [, reRender] = React.useState({});
  React.useEffect(
    () => console.log('rendered ref only on mount', rendered.current),
    [rendered]
  );
  const customVal = custom.current;
  React.useEffect(
    () => console.log('custom ref.current only when re rendering', customVal),
    [customVal]
  );
  return (
    <div>
      <h1>Times rendered: {rendered.current}</h1>
      <button onClick={() => custom.current++}>
        increase custom
      </button>
      <button onClick={() => reRender({})}>
        Re render app
      </button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

Si j'ai bien compris votre question, je dirais oui. Si la réf ne change jamais (en capturant un certain nœud sur le montage du composant), ou si elle change fréquemment (comme dans le cas de usePrevious hook), il devrait être ajouté à la liste des dépendances. Le seul problème potentiel auquel je peux penser est lorsque quelqu'un, par exemple, utilise la référence sur l'entrée et s'attend à recevoir une nouvelle référence mise à jour après que l'utilisateur ait tapé quelque chose. Mais c'est un sujet pour une autre fois