Correction (1:21) - First put the returned array from users.concat(newUser) in a new variable (i.e. newUsers). Then pass it to setUsers: setUsers(newUsers).

Using indexes as keys is not always a bad idea. If the set of items is known and never changing, there’s no reason you shouldn’t be able to use the index. It may be an anti-pattern in most cases but if you know when it is fine to use, just keep that in mind and do it.

its important to know that UseEffect runs TWICE after mount, but only on dev enviroments with strict mode on. I learned that after hours of debugging...

For the "Keys Should Actually Be Unique" part, the purpose of this is list ordering. E.g. if you use a non-data-derived `index` as the key and the list order changes, the renderer won't know and it will not update correctly. If your list is not changing order, it's fine to use an index. Also, it only needs to be unique per parent - so you can e.g. have identical keys in two separate lists rendering as long as those lists have a different parent.

5:51 i don’t recommend adding count to dependency array in this case.. as we can always use the previous value of the state inside setState and use that instead of directly using count

6:41 I agree a simple fetch call in a useEffect is a naive approach and Tanstack query is great, however how do you think they implement this under the hood? Also using useEffect. Much in the same way it also starts requesting the data after the component renders.

i already know all of this right now, but i wish i saw this video 2 years ago. Btw thank you so so much. Keep it up ! Peace

Blowing app your project with extra libraries it is not good either. You do not really need, for instance, React Query to perform fetching data unless your case is very specific.

Insightful💡

pleas manke this types of vlideo more it actualy help to understand concept very great

Love the tips here. Even an experienced dev can learn some things. But, I think useEffect is getting a bad rap. React was originally designed to fetch data after a component is rendered, so you'll always have some type of loading state, regardless of the library used. I wouldn't necessarily call that a "bad" UX. If you need the data earlier, then SSR is the way to go.

Idk how I feel about "just use dedicated hooks to fetch data like swr, react query, or other library." It's alright to make the code work for now, but we introduce vendor lock-in to the project, a haunting tech debt that will lead us to long hours in the long run. However, I also agree that we shouldn't freely use the clunky-ass, hard to understand useEffect. To mediate this problem, I would introduce a context that contains the interface of "useDataFetcher," which is used by the components. The implementation is decided once at the top of the component tree, and this is where we the vendor hooks like swc and react-query are passed. It's not a perfect solution, as there is an extra layer of indirection now between the components and the vendor hooks, making it overkill for small projects. However, it will ease the whole process of migrating from one library to another.

A video on suspense 👀?

The example at 1:21 doesn't work as well, you are not calling setUsers with the new array created from the concat metod so that example wont do anything just like the faulty example. To solve it use the result from the concat method as the argument in setUsers :)

These are great! Thanks! Also, this feels like an advert for React Query. No complaints, though. ;)

We need more tutorials about DSA

The thing about not using indexes for keys flat out is a bit silly and you're doing yourself a disservice if you take it at face value. This tip is very commonly shared as an axiom, but it is really not. In many cases, indexes are perfectly safe as keys, especially when the array you're rendering won't change or it will only grow at the end but not shuffle or grow at the beginning / in the middle.

That was a good video I liked it

life is much easier with svelte

Best explanation I have ever seen for React.❣

hi can u make a vid like this on NextJs

Could you please create a video on JavaScript Data Structures and Algorithms

You seriously are very underrated.

what about fetching data in server side using nextjs and server actions

Honestly, this person produces some of the cleanest videos on React concepts. I am amazed how he makes the videos look simple yet packs it with quality information. Keep it up 🫡

2:38 why shouldn't you use states for stuff that needs to be rendered tho Is it purely because of it's async nature or what

next video on next js Thanks

State must be immutable ... unless you are using a state management tool like mobx

Man, you don't even speak my language and I understood every word you said, thanks

nothing will happen at 1:14 either lol

same bro , immutable mutable 🤷‍♂🤷‍♂🤷‍♀🤷‍♀😂😂

JavaScript is the Wild West, thus the large number of frameworks people write to make JavaScript more usable.

I really don't understand why immutability was pushed so hard with React. It's JavaScript. It's single threaded. It can only perform a single action at a time. What race condition are we protecting against exactly?

Number 8: don't use react. The year is 2024, there are better options available

R19 use(…) hook & ;)