React Fundamentals : What Causes a React Component to Re-Render

In this video, I will go over what causes a react component to re-render.
The base reason a component re-renders is because the props that a component receives get updated.
I will go over several examples showing why how different component structures work and can get re-rendered.

When a component gets re-rendered, it doesn't mean the dom will get updated. First the virtual dom gets updated and react will compare the virtual dom against the actual dom to see if changes need to be made.

Github Repo:

0:30 Intro
1:00 Example 1 - Input Component
1:48 Example 2 - Form Component
5:02 Example 3 - Key prop
7:04 Example 4 - Context Provider
12:45 Outro

[tenthlegionstudios]

Great content. I follow a few react developers. Kent C Dodds, ben awad, and others. This channel seems like a nice addition! thanks!

[marcc]

hook changes cause rerenders as well. I feel you missed this part.

[ihorborzov]

thanks, man, but the colors of your VS code editor are too dark, barely can see anything

[ajaymj]

This is exactly what I am looking for. Great video 👏 In 3rd example without 'key' why it won't re-render.. I didn't get it. Is there any reason for such behaviour..

[nicopicco]

Thanks. Quick question...what would you do to rerender a parent component that has a child 4 component apart, if the state is in localStorage? My issue is that localStorage changes are not affecting react state behavior.