React Hooks Introducing React Hooks 3 — Questions and Answers
Question 1: According to the Rules of Hooks, where can you call Hooks?
- Anywhere in your code
- Only at the top level of a function component or custom Hook (Correct answer)
- Only inside loops
- Only inside event handlers
Correct answer: Only at the top level of a function component or custom Hook
Hooks must be called at the top level, not inside loops, conditions, or nested functions.
Question 2: Why must Hooks not be called inside conditionals or loops?
- It causes a syntax error
- React relies on call order to preserve state between renders (Correct answer)
- It slows down rendering
- It breaks JSX parsing
Correct answer: React relies on call order to preserve state between renders
React identifies each Hook's state by the order in which Hooks are called.
Question 3: From where are you allowed to call Hooks?
- Regular JavaScript functions
- React function components and custom Hooks (Correct answer)
- Class methods
- Global module scope
Correct answer: React function components and custom Hooks
Call Hooks only from React function components or from other custom Hooks.
Question 4: What tool helps enforce the Rules of Hooks automatically?
- eslint-plugin-react-hooks (Correct answer)
- prettier
- webpack
- react-router
Correct answer: eslint-plugin-react-hooks
The eslint-plugin-react-hooks plugin enforces these rules during development.
Question 5: What is a custom Hook?
- A built-in React API
- A JavaScript function whose name starts with 'use' and that may call other Hooks (Correct answer)
- A class that extends Component
- A CSS-in-JS helper
Correct answer: A JavaScript function whose name starts with 'use' and that may call other Hooks
A custom Hook is a function starting with 'use' that can call other Hooks to reuse logic.
Question 6: Do two components using the same custom Hook share state?
- Yes, they share one state instance
- No, each call gets its own isolated state (Correct answer)
- Only if they are siblings
- Only with a context provider
Correct answer: No, each call gets its own isolated state
Every call to a custom Hook gets a completely isolated state.
Question 7: Which is NOT a valid place to call a Hook?
- Top level of a function component
- Inside a custom Hook
- Inside a regular nested helper function (Correct answer)
- At the start of a custom Hook body
Correct answer: Inside a regular nested helper function
Hooks cannot be called from regular (non-Hook) nested functions.
React Hooks Introducing React Hooks 3
According to the Rules of Hooks, where can you call Hooks?