Ah, closures. The infamous interview subject that induces perspiration even in experienced developers.
But guess what? Closures aren’t mythical monsters just there to ruin our day. They’re actually our undercover allies, ready to supercharge our code!
While most grasp the “what” of closures, the “why” and “how” often get lost in the theoretical fog. That’s where we come in!
Let’s ditch the dry textbook language and unveil the practical superpowers of closures.
Analogy for Closure
Bard provided a great analogy of closures.
Imagine a function, like a tiny robot, living inside another function, its bigger robot pal. The little robot gets a special bag from its parent, filled with all sorts of secrets (variables). Even when the big robot leaves, the little one still has access to everything in that bag - it remembers!
That’s a closure.
Pretty simple, right?
Now, let’s check out the code.
What is Closure?
We create a local scope inside
greet function which is invisible outside the function.
Similarly, a function created inside another function (
printMessage ) will have its own local scope,
invisible to the function outside (
On the other hand the inner-most function (
will have access to all the variables declared outside.
Let’s modify the code a bit to accept message as parameter.
greet is called, the
message argument is assigned a value.
This value is captured by the closure,
meaning the inner
printMessage function can access it even
after the greet function finishes execution.
greet function returns the
printMessage function as its result.
This means that even though the
greet function itself no longer exists,
printMessage function still holds a reference to the captured message value.
message2 variables store the returned functions
from two separate calls to greet with different messages.
In essence, closures allow functions to remember and access their enclosing scope even after the function itself has been returned or the outer function has finished executing.
This is all about the “what” of closures.
Now, let’s see how these undercover agents benefit our React code.
Closures in React
Closures in React come into play when dealing with event handlers and maintaining state across re-renders.
1. Event Handlers:
In React, event handlers are often defined as anonymous functions within JSX expressions. These anonymous functions can capture references to variables from the surrounding scope, creating closures.
In this example, the
handleClick function captures a reference to the
from its surrounding scope.
This means that even if the
count variable changes after the
handleClick function is defined,
the function will still have access to the latest value when it is called.
useCallback, or custom hooks leverage closures to encapsulate and manage state.
2.1. Custom hooks
Custom hooks are functions that use other hooks. They help in creating private data that is not accessible from the outside.
In this example, the
useCounter hook encapsulates the state (
and the function to update it (
The closure formed by the inner function (increment) ensures
that it always has access to the correct state.
2.2. useEffect hook
count variable is declared in the Counter component’s scope
but is used within the
useEffect callback function.
This function captures the
count variable due to closure,
allowing it to access the current value of count even after the
useEffect has been declared.
count dependency is not passed to
it provides stale data and the closure is termed as a stale closure.
Here’s how closures enhance React:
State Management Mastery:
Closures enable components and hooks to maintain access to their surrounding variables even after execution. This allows for seamless state updates within components and the creation of reusable custom hooks that encapsulate stateful logic.
Event Handling Excellence:
Closures ensure that event handlers can access and update component state correctly, even when those handlers are defined outside of the render function. This simplifies event handling and promotes code clarity.
Remember, closures aren’t interview monsters, they’re practical tools waiting to be mastered. So, embrace them and use them wisely!