When we set an event handler for a function component, how does it access to function component local variables? because when the component was being rendered the local variables created and when it return the JSX code, the local variables removed. So how does the event handler in this code log c in the console when the c should not exist? The clickHandler function called after the component rendered.
function Sample() {
let c = 0;
const clickHandler = () => {
console.log(c);
}
return <h2 onClick={clickHandler}>'Hello'</h2>
}
export default Sample;
How clickHandler is able to access a local variable (c) is what's called a closure.
Closure lets a function access the variables in its lexical scope (where is written) even when it's passed as an argument elsewhere.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures