Deriving state in React

It's always better to derive state instead #react #reactjs #reactjsdeveloper #programming #progammer #frontend #coding #code

[Anas_Alaqeel]

Better explain: when you set a new state in react like user in this case, the whole component will re-render with every time you set the state, so the variable isPopular will reload with the component which is reloaded by the state and this will give you the latest isPopular value

[DarkOceanShark]

I'm kind of surprised to see this on my recommendation, because I was working on the same pattern yesterday where I had two states and one dependent on another using an effect 😅! Here one of the two states was from a redux slice though.
I resolved it by having a single state like how you recommended here.

[adtc]

If it doesn't change inside the component, you don't need to have a state variable for it. Just derive it into a constant.

[PaulSebastianM]

Think: do I derive state from reactive state? Then that state also becomes reactive. The first reactive state will trigger a rerender every time it changes so any const built in the body of the component will rerun with the rerender.

[ajayjb]

I agree, let's assume there are other states which are changing so every time isPopular will be calculated, instead of it what if wrap this isPopular with useMemo and user as dependency array. I know this is not a heavy calculation to memorize, but to prevent unnecessary calculation. What's your taught on this?

[bobbyjose]

question: could we not write the condition directly as user.friendcount>1000? under the div instead of isPopular? check

[SeifDinne-em]

Question: why you dont put in usememo to avoid recalcule in every rerender ?

[whoman]

this just proves that too much react isnt good for your mental health

[aminnairidev]

And if you have another state, you juste deriving your state unnecessarily, I was expecting you to show the useMemo hook that is ACTUALLY the solution for derived state and if you are reading this comment, simply wrap his solution in a useMemo instead to prevent unnecessary re render from another state that has nothing to do with the user.

[shaleenchanda]

We try to keep single source of truth right?!

[ujenbasi]

Why use a state if it's never going to change?? Using a constant will be nicer and clean code.

[ПавелПечёный-фй]

Here we can use useMemo I assume. Why we don’t use it. What are the dependencies of using useMemo?

[adamjamiu]

I had the same use case like this your example, i also have the feeling that i am using react useEffect and useState hooks redundantly, but i later notice if the user network is slow, there is going to be an error in the isPopular object. So I switched to useEffect and useState to handle the data state and update the isPopular state after it successfully fetched the data. So i believe using useEffect and useState is the best practice because it gives you edge to handle errors and other stuff

[firedforfighting]

if the user is null on the first render and they have to wait for a user to be available from a database first to then create isPopular, I thought this would be a good time to use useEffect but I suppose the re-render from the setUser would correct it!...good lord the refactoring is going to be monumental 😆

[TheTopComments]

That's great ❤ i usually wrap with the useMemo and pass dependancy

So that it won't recalculate again and again Unless there is change in dependancy