Hey all, so I have been doing React for a little bit now, and have done 4 or so projects in React, and will be converting some of my old responsive web design projects to react for some more practice. However, one question I’ve come across is where do I store variables that I need to access in multiple methods/functions within a react component. I don’t want to store them in state, because I don’t need to re-render page for these particular variables because they are being used in a logic chain to eventually output a value that I will ultimately store/update. I’ve taken to storing these variables that I need for multiple methods/functions on the component at the global level, but that doesn’t seem quite right or on spec to me. However, I’m doing so because otherwise I end up with code that isn’t very dry. Is the better practice to instead of storing on global, just create a property on the component that is just essentially a variable bank? I’ve tried declaring variables on componentDidUpdate but because of scoping, I cant access them in other functions/methods. Is there a way around this?
As far as I understand there’s nothing wrong with storing variables “on the component at the global level”.
Maybe you have some code example?
I’m going to take a wild guess here and say you definitely aren’t storing them at a global level: that would mean you’re adding variables like window.myVariable = "foo"
This article says you can store variables:
- Using state at the component level
- using this at the component level
- Using redux
- Globally(although it says this isn’t recommended generally)
https://medium.freecodecamp.org/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00
Very very helpful article. Using this at the component level is what I’m looking for. I was storing them globally before (ie defining them outside of component, at global level, so I could access them anywhere) but didn’t realize using this within a method on the component would define it on the component rather than the method, but I guess that is why we bind this, that tricky little thing. Redux would probably be helpful, but to be honest my head hurts when trying to wrap my head around redux.
That wording was admittedly confusing when I wrote it, could have proofed it better. I meant to say, I would store data/vars on the global object (window), so I could access it within multiple methods on the react component.
Ah, I see, that seems difficult way to do things. What use case do you have here?
Edit: just to clarify, this is explicitly going against against how React normally works, and is quite an unusual thing to do. And the reason I say it is difficult is that, although it will work for simple stuff, if you are modifying those values, it is likely to break down very quickly without some kind of consistent interface (which is what redux, or context, or mobx or whatever provide)
This is literally what state is for, it would be useful if you could post some code because it sounds very much like there are some issues with how you’re structuring your app
There are rarely a reason to do this.