Event handler execution inside react function component

Question

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;

https://stackoverflow.com/a/111114/12541413 – Sagar Darekar Feb 03 '22 at 07:56 — Sagar Darekar, Feb 03 '22 at 07:56

score 0 · Accepted Answer · answered Feb 03 '22 at 07:54

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

Event handler execution inside react function component

1 Answers1