From 364c6613858f9badc9d4c420858ba615423775dc Mon Sep 17 00:00:00 2001 From: Ty Mick Date: Fri, 26 Feb 2021 23:18:00 -0600 Subject: [PATCH] Clarify the definition of "inside conditions" (#3542) * Clarify the definition of "inside conditions" * Make clarification more concise Co-authored-by: Ricky * Remove accidental extra period Co-authored-by: Ricky --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 1cd5c09d..82c964f3 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -12,7 +12,7 @@ Hooks are JavaScript functions, but you need to follow two rules when using them ### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level} -**Don't call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple `useState` and `useEffect` calls. (If you're curious, we'll explain this in depth [below](#explanation).) +**Don't call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple `useState` and `useEffect` calls. (If you're curious, we'll explain this in depth [below](#explanation).) ### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions}