React Hook Stuff

Question 1

what makes a function a hook?

Answer 1

A function becomes a hook when:
It uses other hooks inside it, such as:

useState

useEffect

useRef

useContext

etc.

It starts with the word use — this is required by React’s rules so that the linter can enforce the Rules of Hooks.

Question 2

What are the two rules for Hooks

Answer 2

According to React’s official rules:

• Only call hooks at the top level.
  Never inside conditions, loops, or nested functions
• Only call hooks from React functions.
  This means from a React component or another hook

Question 3

“Only call hooks from React functions.”
This means…..

Answer 3

A. You can call hooks inside a React component
B. You can call hooks inside a custom hook
C. You CANNOT call hooks from:
* Regular JavaScript functions

• Class components
• Conditional blocks (if, for, etc.)
• Event handlers or callbacks (directly)

Question 4

What is a Lazy Initializer in useState?

Answer 4

React’s useState can accept either:

A value: directly used as the initial state.

A function: which React will call once (lazily) to compute the initial value.

Question 5

Lazy Initializer Form (what your line uses):

Answer 5

useState(() => cache.get(url) ?? null);

React will call the function only on the first render to get the initial state.

It’s useful when computing the value is expensive or optional, such as reading from a cache, localStorage, or doing a calculation.

Prevents the computation from happening on every render.

Question 6

WRONG Eager Evaluation (non-lazy form):

Answer 6

useState(cache.get(url) ?? null);

In this version, cache.get(url) runs immediately, whether or not React actually needs to initialize state right now.

On every render, this code is evaluated—but useState will ignore it after the first render.

This can lead to unnecessary computation if cache.get(url) is expensive, or if it’s not needed (e.g. in server-side rendering scenarios).

Question 7

In the useEffect, when does a return run?

Answer 7

It runs to cleanup before the component unmounts or before the effect runs again. (When dependencies change.)

Question 8

What does the return inside a useEffect do?

Answer 8

1. Defines a cleanup function.
2. It only runs when the component un-mounts or before the effect re-runs
3. It’s not a normal return like a function.

Question 9

When to use a return function in the useEffect?

Answer 9

1. When canceling API requests
2. Clearing timeouts.
3. unsubscribing to listeners.

Question 10

Definition of useEffect

Answer 10

Action to let your code run after react has updated the screen.

Like Saying
“Hey after you paint everything on the page, I need to run some side work like fetching data, setting up timers etc”

Question 11

When should you use useEffect?

Answer 11

1. When fetching api data after the page loads
2. Listening to scroll events
3. Set Time Intervals
4. Cleaning up components