Read React Context value without subscription like Redux's store.getState()

Question

const UsersStateContext = React.createContext( [{user:1},{user:2},{user:3}] );

function getState(){
  return UsersStateContext._currentValue;
}

After hours of searching I was able to find this method that is not supported officially. Is there a solution for React hooks to just read current state without subscription like Redux's store.getState()?

Or is this method it safe to use in production?

Does this answer your question? [How to get the data from React Context Consumer outside the render](https://stackoverflow.com/questions/49870098/how-to-get-the-data-from-react-context-consumer-outside-the-render) — Bhojendra Rauniyar, May 31 '20 at 15:50
Someone made a good explanation as "context without a component is meaningless". But deleted it. For example, a button in the Users State Context Provider renders by a user data from Context, after pressing it, it pulls a data from another Context (not related to it's render) with that user data and sends both to a component tree outside the Users State Context Provider tree. So even though it uses context data, there are components that are not affected by the change in Context. How should we solve this? — Yusuf Bayrak, May 31 '20 at 16:29
So If I could just read a value then it's allright. (not looking for a React.Memo solution) — Yusuf Bayrak, May 31 '20 at 16:36
Unfortunately. As the answer below suggests, Im keeping the same data synchronously in a global variable, and calling it when I need. — Yusuf Bayrak, Oct 14 '20 at 10:40
Do you know if you can achieve the same goal with Mobx? It seems easier than Redux — oron cohen, Oct 15 '20 at 05:59
I was previously using Redux in the project, my main reason to do it inside React was to reduce dependencies. — Yusuf Bayrak, Oct 15 '20 at 21:40

Dennis Vash · Answer 1 · 2020-05-31T15:45:12.287

1

Short answer: It's not safe in production, instead you can maintain a global variable.

This "hack" is exactly like reading from a global variable. Your component can't be notified when the global variable updates.

See the explanation on global variables here: Why need useRef to contain mutable variable but not define a variable outside the component function?

let counter = 0;

const Component = () => {
 /* 
    On changing the counter value, the component won't get re-rendered with its new value.
 */
  console.log(counter);
  return <></>
}

Is there a solution for React hooks to just read current state without subscription like Redux's store.getState()?

store.getState() returns the last value returned by the store's reducer. It's exactly the behavior like you intended with UsersStateContext._currentValue, if you want to feel safer, you can maintain a global variable as mentioned.

The official way is to subscribe to context by consuming it, for example with useContext:

const value = useContext(MyContext);

edited May 31 '20 at 15:45

answered May 31 '20 at 15:38

Dennis Vash

50,196
9
100
118

Thanks Dennis! I think I need to maintain a global variable or return to redux. There are components that rendering via Context data but are not interested in data changes. Even sometimes my service functions need to reach these data. Subscribing a context for just reading a value doesn't look smart. I was trying to remove redux dependency but my code turns spaghetti. – Yusuf Bayrak May 31 '20 at 17:04
"Subscribing a context for just reading a value doesn't look smart." It does, you won't be able to do it with just `store.getStore()` as mentioned. – Dennis Vash May 31 '20 at 17:06
If you have a concrete example feel free to ask a new question. – Dennis Vash May 31 '20 at 17:07
Actually, all I want is to read a single value from an object that is exist. lol – Yusuf Bayrak May 31 '20 at 17:55

Read React Context value without subscription like Redux's store.getState()

1 Answers1