React context not shared between components

Question

I use a react context between 2 components, however when I set the value this context in the child filtersBar component, it does not update or useffect in the second child map component.

contextprovider

const SearchContext = createContext();

const SearchContextProvider = ({children}) => {
const [contextValue, setContextValue] = useState(null);            
    return (
    <SearchContext.Provider value={[contextValue, setContextValue]}>
        {children}
    </SearchContext.Provider>
);

index.js

 <SearchContextProvider>
    <FiltersBar/>
      <Map/>
    </SearchContextProvider>

Filtersbar.js

const FiltersBar = () => {
        const [searchContext,setSearchContext] = useContext(SearchContext);
        const [searchLocationResult, setsearchLocationResult] = useState(null);
        const [inputSearchLocation, setinputSearchLocation] = useState("");
  
 useEffect(() => {
// stuff
                 searchContext.autocompleteLocation = [46.6, 8.5]
              setSearchContext(searchContext)

        }, [searchLocationResult, inputSearchLocation]);

Map.js

const Map = () => {
  
    const [searchContext, setSearchContext] = useContext(SearchContext);


    useEffect(() => {
      console.log("use effect map"+JSON.stringify(searchContext))
    }, [searchContext]);

I never see this use effect map console log message. What am I missing?

`setSearchContext(searchContext)` This won't cause SearchContextProvider to render, because the state has not changed. Is it like this in the real code too, or is that just because you (over)simplified it to ask the question? — Nicholas Tower, Feb 20 '22 at 12:01
you are right I have cut too much code. the searchContext is not null when setting it. I edited the code — a-dawg, Feb 20 '22 at 12:34
Your edited code *still* won't cause a rerender. You need to create a new state, not mutate the old one. Maybe this doesn't matter and your real code is doing it fine, but i can only work with what i've got. — Nicholas Tower, Feb 20 '22 at 12:38
this new state should be created into the filterbar? or searchContextProvider? can you guide me through? I am new to this — a-dawg, Feb 20 '22 at 15:37
The location is fine, you just need to copy the state, not mutate the original state. I've added an answer to show this. — Nicholas Tower, Feb 20 '22 at 16:36

score 1 · Accepted Answer · answered Feb 20 '22 at 16:33

If the code you've shown is an accurate representation of your real code, the problem is that you're mutating state, not creating a new one. When you set state, react does a === between the state before and the state after. It sees that they're the same object, so it thinks nothing has changed, and it does nothing.

So instead of this:

searchContext.autocompleteLocation = [46.6, 8.5]
setSearchContext(searchContext)

Do this:

const newState = {
  ...searchContext,
  autocompleteLocation: [46.6, 8.5]
}
setSearchContext(newState);

score 0 · Answer 2 · answered Feb 20 '22 at 12:05

0

Because of this

useEffect(() => {
  /// stuff
  setSearchContext(searchContext) // ----> here
}, [searchLocationResult, inputSearchLocation]);

searchContext never changes. it always null, you awlays set null to setSearchContext function. Maybe you only get first console.log like use effect mapnull when reload or component init

answered Feb 20 '22 at 12:05

Anh Le

270
1
9

sorry I have edited my oversimplified sample, it is never null – a-dawg Feb 20 '22 at 12:35
Haha. the last answer from you in first thread point that. setSearchContext(searchContext) This won't cause SearchContextProvider to render – Anh Le Feb 20 '22 at 12:37
I need to update the context infact to be spread to my 2 components, how would you do it. I have tried set the searchcontext with an intermediate variable but still not refreshing the map component – a-dawg Feb 20 '22 at 15:45

score 0 · Answer 3 · answered Feb 20 '22 at 17:13

React hook is a bit different with React state in Class component. React hook consider state changes only if it's new object, u should create new object when you update the state.

You can update the useEffect of FiltersBar as below: Filtersbar.js

const FiltersBar = () => {
        ...
 useEffect(() => {
// stuff
    setSearchContext({...searchContext, autocompleteLocation: [46.6, 8.5]})

}, [searchLocationResult, inputSearchLocation]);

React context not shared between components

3 Answers3