reactjs / reactjs/react.dev

[Suggestion]: Document that hooks can be called after a conditional `throw`

Ouverte
#7,291 0 commentaires 10 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

type: documentation
Langage dominant
JavaScript
Étoiles
11.8k
Forks
7.9k
Merge moyen
1 j 11 h
PR mergées (30 j)
11

Description

Summary

I don't believe it is documented anywhere that calling a hook after a conditional throw statement is not a violation of the rules of hooks. If this is a valid pattern, it should be documented. If it is not, the Eslint rule rules-of-hooks should warn for it.

Page

Rules of hooks

Details

I realised this is effectively the pattern when using Next.js app router notFound(), which throws an Error in the component render. I had assumed this not being flagged by the rules-of-hooks was a limitation of the Next.js eslint plugin, but actually, this is not flagged as an issue with a standard throw:

const Component = ({ someOtherCondition }) => {
  const [foo, setFoo] = useState();

  if (someOtherCondition) throw new Error();

  const [bar, setBar] = useState();

  return (<>...</>);
};

My assumption is this is a valid pattern as if someOtherCondition becomes true, the error will be thrown up the call stack to the nearest error boundary, and the render that was in-progress will be discarded. There is not a case to have this conditional throw call more hooks than the previous render, only less. The rules of hooks state:

It’s not supported to call Hooks (functions starting with use) in any other cases, for example:

🔴 Do not call Hooks inside conditions or loops.
🔴 Do not call Hooks after a conditional return statement.

In the example above, the second useState call comes after a conditional throw statement. Not quite either of the cases in documentation.

If this is a valid pattern, it should be mentioned in the docs, with potential warnings about it not being a recommended workaround to conditionally call hooks (as there is no way to resume execution of the other path of the conditional once an error is thrown from the component).

If this isn't a valid pattern, it should be flagged by the eslint rule.

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la page « Rules of Hooks » et le comportement documenté de rules-of-hooks décrit dans l’issue. Reproduisez l’exemple de throw conditionnel, puis déterminez si la page a besoin d’une clarification ou si la règle ESLint doit être modifiée ; le travail est terminé lorsque le comportement et les indications prévues à son sujet sont résolus et reflétés à l’endroit approprié.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
eslint, javascript, next.js, react
Domaine
documentation
Type d'issue
Documentation
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.