How do closures work in React?

Can you explain how closures work in React?

Sure! Closures in React allow functions to remember their lexical scope, which is useful for maintaining state.

Can you give me an example of using closures in a React component?

Absolutely! Here's a simple example: you can use a closure to create a counter function that retains its state.

How would you implement that in a functional component?

You can use the useState hook along with a closure to create a counter. Here's a code snippet:

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return <button onClick={increment}>Count: {count}</button>;
};