The object passed as the value prop to the Context provider changes every render

Question

I have this error:

src/index.js Line 9:36: The object passed as the value prop to the Context provider (at line 9) changes every render. To fix this consider wrapping it in a useMemo hook react/jsx-no-constructed-context-values

I am not sure how to use useMemo in this case.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import FirebaseContext from './context/firebase';
import { firebase, FieldValue } from './lib/firebase';
import './styles/app.css';

ReactDOM.render(
  <FirebaseContext.Provider value={{ firebase, FieldValue }}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById('root')
);

score 11 · Answer 1 · answered Feb 24 '22 at 18:18

I think you need to return FireBaseContext from another component. And in that component you can do useMemo to make ESLint happy.

Something like below (I didn't test this)

import { useMemo } from "react";
import ReactDOM from 'react-dom';
import App from './App';
import FirebaseContext from './context/firebase';
import { firebase, FieldValue } from './lib/firebase';
import './styles/app.css';


ReactDOM.render(
  <FireBaseWrapper />,
  document.getElementById('root')
);

const FireBaseWrapper = () => {
  const fireBaseProviderValue= useMemo(() => ({ firebase, FieldValue }), [firebase, FieldValue]);

return (<FirebaseContext.Provider value={fireBaseProviderValue}>
    <App />
  </FirebaseContext.Provider>)
}

score 1 · Answer 2 · answered May 18 '23 at 15:10

I had this same problem and didn't necessarily want to use 'useMemo'. I instead pasted this eslint command above the line in question, and it disables the eslint flag.

    // eslint-disable-next-line react/jsx-no-constructed-context-values

This then allowed me to deploy without the issue.

The object passed as the value prop to the Context provider changes every render

2 Answers2