What are JavaScript closures and how to use them in React

JavaScript is one of the most popular programming languages ​​among developers, but this does not mean that it is one of the easiest to master. Among its various concepts and functions are closures, ones that even a senior developer can have trouble mastering.

What are closures in JavaScript?

Its official definition tells us "a closure is a structure of a function and its lexical environment, including the variables of the scope of the function at the time of the creation of the closure". Explaining it another way, with closures in JavaScript it is possible for an internal function to have access to the scope of an external function.

Before seeing some examples of closures in JavaScript, we must understand a little what the lexical environment is. This is the local memory together with its parent environment, an example that we see in the following code, where we invite you to guess the result:

function outer () {
 let a = 10;
 console.log (y);
 inner ();
 function inner () {
 console.log (a);
 console.log (y);
 }
}
let y = 9;
outer ();

The result would be 9, 10, 9. The inner function has access to the variables of its parent, the outer function (). Therefore, the inner () function can access the variable a. The inner () function can also access the variable and due to the scope string concept.

Closure in JavaScript: examples

This is an example of a closure in JavaScriptt, these are nothing more than a function and its lexical environment:

function a () {
 let x = 10;
 function b () {
 console.log (x);
 }
 b ();
}
to();

Another example of closure that we can consider is one where three functions are nested within each other.

function a () {
 let x = 10;
 function b () {
 function c () {
 function d () {
 console.log (x);
 }
 d ();
 }
 c ();
 }
 b ();
}
to();

The importance of closures in JavaScript

Not only for JavaScript, but closures are also very important in any programming language, used in various scenarios where you can create variables in your private scope or combine functions.

Closures in React

A closure code in React would look like this:

function App () {
  
    const [state, toggle] = useState (0);
  
    useEffect (() => {
    
    setInterval (() => {
      console.log (`state $ {state}`);
    }, 3000)
  
    }, [])
    
    return (<div>
            <h2> {`$ {state}`} </h2>
           <button onClick = {() => {toggle (state + 1)}}> Increase </button>
                  </div>
)
}

You can see how the record stays the same at all times. Again, the behavior can be attributed to closures. SetInterval has captured the previous state (0). Therefore, it is an outdated closure.

At Rootstack, we have a team of expert JavaScript and React developers who with their talent have provided solutions to the technological problems of our regional and international clients. You can be part of this team, click here and start building your professional career.

We recommend you on video