10. Closure in React

Question 1

In JavaScript, what is created every time a function is declared, preventing variables inside from being visible outside?

Answer 1

A local scope.

Question 2

What JavaScript mechanism allows an inner function to access and ‘remember’ variables from its containing (outer) function’s scope?

Answer 2

A closure.

Question 3

When a closure is formed, it is essentially a _____ of all the ‘outside’ data frozen in time.

Answer 3

snapshot

Question 4

In React, every single callback function declared inside a component is a _____.

Answer 4

closure

Question 5

Besides callbacks, what two common React hooks also create closures with the functions passed to them?

Answer 5

The useEffect and useCallback hooks.

Question 6

What is the term for a closure that captures and holds onto outdated values of state, props, or other variables?

Answer 6

A stale closure.

Question 7

A closure lives for as long as a _____ to the function that created it exists.

Answer 7

reference

Question 8

In React, what is the primary mechanism for ‘refreshing’ a cached closure created by useCallback with the latest state or props?

Answer 8

The dependencies array.

Question 9

What happens if you use a state variable inside a useCallback but forget to add that state variable to the dependencies array?

Answer 9

The callback will form a stale closure, always accessing the initial value of the state.

Question 10

Why does storing a state-dependent function in a useRef on initial render often lead to a stale closure?

Answer 10

Because the ref is initialized only once, and the closure it holds is never refreshed with subsequent state changes.

Question 11

To fix a stale closure caused by a function stored in a ref, what must you do whenever the dependencies (state/props) change?

Answer 11

You must manually update ref.current with a new function (closure) that captures the latest data.

Question 12

In the initial React.memo example, what is the dilemma when trying to memoize a HeavyComponent that needs a state-dependent onClick handler?

Answer 12

Wrapping onClick in useCallback with the state as a dependency causes it to be re-created on every state change, defeating React.memo.

Question 13

When using React.memo with a custom comparison function that only compares a title prop, what problem occurs for an onClick prop that depends on state?

Answer 13

The component never re-renders, so it holds a reference to the very first onClick closure, which becomes stale.

Question 14

To escape the stale closure trap for memoized components, what React hook is used to hold a mutable reference to the latest version of a function?

Answer 14

The useRef hook.

Question 15

In the useRef pattern to avoid stale closures, which hook is used to update ref.current with the latest function on every re-render?

Answer 15

The useEffect hook.

Question 16

In the useRef pattern, why is the useEffect that updates ref.current written without a dependencies array?

Answer 16

To ensure it runs on every re-render, thus always updating the ref with a fresh closure capturing the latest state.

Question 17

In the useRef pattern, what kind of function is actually passed as a prop to the memoized component?

Answer 17

A stable function created with useCallback and an empty dependency array.

Question 18

In the useRef pattern, what does the stable useCallback function do to access the latest state?

Answer 18

It calls the function currently stored in ref.current().

Question 19

Why isn’t the ref object itself needed in the dependency array of the useCallback in the stale closure escape pattern?

Answer 19

Because the ref object returned by useRef is stable and its identity never changes between re-renders.

Question 20

How does the useRef pattern solve the memoization dilemma?

Answer 20

It provides a stable function prop (onClick) so React.memo works, while that function can internally access the latest state via the mutable ref.

Question 21

Consider the code: const something = (value) => { return () => console.log(value); }; const first = something('one'); first(); What is logged?

Answer 21

The string ‘one’ is logged, because a closure captured the value variable.

Question 22

If a function inside is created within a function something, can something access variables declared only within inside?

Answer 22

No, variables declared in an inner scope are not visible to the outer scope.

Question 23

What is the consequence of caching a closure and then returning that cached version on subsequent calls with different arguments?

Answer 23

It creates a stale closure, where the function always executes with the data from when it was first created and cached.

Question 24

What built-in React hook behaves similarly to manually caching a function and refreshing it only when specific values change?

Answer 24

The useCallback hook.

Question 25

A `useRef` hook, when initialized with a function `() => { console.log(state); }`, will always log the _____ value of the state if `ref.current` is not updated.

Answer 25

initial

Question 26

When a closure 'freezes' its surrounding data, does it make objects within its scope immutable?

Answer 26

No, it only freezes the reference to the object; the object itself remains mutable.

Question 27

In the `Form` example, using `React.memo` with `(before, after) => before.title === after.title` causes the `HeavyComponent` to hold onto the _____ `onClick` function it received.

Answer 27

very first