Code QuizIntermediate

Passing Updaters Through Context

The increment function fires once at render instead of on click.

Codejavascript

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  return (
    <CounterContext.Provider value={{ count, increment: increment() }}>
      {children}
    </CounterContext.Provider>
  );
}

What is the bug in this code?

← PreviousContext.Consumer Render Prop Next →Reading Context Outside the Provider