How to fix 'Expected the return value to be a 31-bit integer' error react hooks

Question

I created a counter for experienced hooks with context api everything works but I have a warning :

Warning: calculateChangedBits: Expected the return value to be a 31-bit integer. Instead received: undefined

my context

export const CountCtx = createContext(0, () => {});

function CountContext() {
  const [count, setCount] = useState(0);

  return (
    <div className="cp1">
      <CountCtx.Provider value={[count, setCount]}>
        <p>Component where i created the context 'CountCtx'<br/>Counter is {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <ComponentA/>
      </CountCtx.Provider>
    </div>
  )
}

Component A

function ComponentA() {
  const [count, setCount] = useContext(CountCtx);

  return (
    <div className="cp2">
      <p><b>Component A</b><br/>Counter is {count}</p>
      <button onClick={() => setCount(0)}>Reset</button>
      <ComponentB/>
    </div>
  )
}

Component B

function ComponentB() {
  const [count, setCount] = useContext(CountCtx);

  return (
    <div className="cp3">
      <p><b>Component B</b><br/>Counter is {count}</p>
      <button onClick={() => setCount(count -1)}>Decrement</button>
    </div>
  )
}

Thanks a lot i dont understand this warning :-/

Answer 1

Second parameter in createContext is undocumented calculateChangedBits callback function.

Since invalid callback was provided, this prevents the context from working:

export const CountCtx = createContext(0, () => {});

It should be:

export const CountCtx = createContext(0);