4 Beginner React States Mistakes to AVOID

The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/pedrote...
In this video I will go over 4 reactjs states mistakes you should avoid.
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
🐙 GraphQL Course: codedamn.com/l...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Business Email: [e-mail]
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- React States
#reactjs #states

[@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

[@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

[@user-og7de8ih4f]

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

[@fromthefuture1238]

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

[@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 ?

[@user-og7de8ih4f]

@@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]

@@user-og7de8ih4f if i want to get that data from api and in useEffect add something to it then display, so useState is needed?

[@eloualihmade7071]

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

[@PedroTechnologies]

Happy to help!

[@levaniakobidze8202]

Great video.Thanks Pedro.

[@zainabideen8144]

Always Fantastic stuff! Looking forward to more amazing videos

[@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.

[@hamad5141]

What vs theme are you using?