4 Beginner React States Mistakes to AVOID

[@PedroTechnologies]

The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/pedrotech08221

[@ivodelev9794]

Hi, great video Pedro! On the last "mistake" what I would do is group the state in to single object and have 1 setter for the entire state, instead of unnecessarily complicate the code with useReducer unless it becomes more complex with deep nested objects and arrays.

[@Linkdu-pp5nl]

What do you think to use a single state like this : const [login, setLogin] = useState(initialState) And then setLogin({...login, key:value}) To update the value

[@levaniakobidze8202]

Great video.Thanks Pedro.

[@waleedsharif618]

At 7:36 you said dont create state for it, but what if we want to change that data coming from useQuery and show that changed data (for example filtering), then we need to set state for it right?

[@PedroTechnologies]

Great question! You can just create a variable for the changed data. FOr example, imagine the data we get back from the useQuery is called `data`. Now imagine we want to change that data by filtering. We can just create a new variable: const newData = data.filter(()=>...)

[@sanketss84]

Will this rerender the component on refetch trigger by react query?

[@waleedsharif618]

@@PedroTechnologies but if we want to update that data then we should use useState ?

[@сойка-и8й]

@@waleedsharif618 the data is coming from an API all you can do is display it. why will you want to mutate data coming from an API ??

[@waleedsharif618]

@@сойка-и8й if i want to get that data from api and in useEffect add something to it then display, so useState is needed?

[@zainabideen8144]

Always Fantastic stuff! Looking forward to more amazing videos

[@Matt-dt7cf]

so how do you force setState to work synchronously?

[@ghosriderxD]

just copy the content to a local variable and work with that variable and set the state once at the end of the function

[@сойка-и8й]

Using function to update state const [age, setAge] = useState(0) use setAge((prev)=> prev+1) instead of setAge(age+1)

[@alpaca_growing_kit]

Why would you not just go all the way and get redux toolkit implemented if you need the login logic elsewhere in the application? UseReducer bugs me a bit, because I think it's easier to just spend 5-10 minutes setting up redux toolkit, especially professionally so it scales better.

[@PedroTechnologies]

In this case, the useReducer is used for onlhy a specific part of the app, not to mention that it built into react so if you were to use redux toolkit for this it would be better to use the useReducer. (smaller size and built in)

[@alpaca_growing_kit]

@@PedroTechnologies yeah definitely in this case, but what I mean is that there's few situations where you need useReducer and cannot just use redux toolkit in a professional setting, because it will scale better. But yeah in niche situations its better to just use the reducer hook.

[@eloualihmade7071]

I don't know how i can thank you, but really thank you so much ❣️

[@PedroTechnologies]

Happy to help!

[@fromthefuture1238]

how to npx create-react-app adding pckg with yarn, mine is adding pckg with npm

[@hamad5141]

What vs theme are you using?