spent the last week going deep into React to understand how rendering actually works under the hood.
turned it into a video , tracing what happens between writing JSX and seeing pixels on screen. every step, from createElement to fiber nodes to the one appendChild call that makes the page appear.
this is part 1 covering the initial render.
part 2 on re-renders and reconciliation is coming next.
link : https://lnkd.in/dycpqavw
if you've ever wondered what the "virtual DOM" actually is (spoiler: it's just plain objects that get thrown away every render), this one's for you.
#react#javascript#frontend#webdev
Hi, I'm Omar. In this video we're going to look at how React actually renders in the browser. Not the surface level explanation, but we're going to trace the exact path your code takes from JSX to pixels on the screen. So this is the code that we will be tracing, uh, simple app component, our dev with an H1 and AP tag, and we'll see how React goes through these three phases, the build phase, the render phase, and the commit phase. The initial render contains 3 main phases. The first is the build phase where your GSX is compiled to React Git element calls. This is a pure text transformation, nothing runs yet. 2nd is render phase your components. Each component is uh run and from top to bottom. This is where your. Virtual Dom nodes are created in memory. And nothing on the screen yet. The third is called the commit phase. In the commit phase, your Dom that you have built inside the memory is attached to your browser. Let's look into the build step in more detail. GSX isn't real JavaScript, it cannot run on your browser directly. So your build tool like weed or ebuild replaces every angular brackets with a function call. And this happens at build time, before any code runs. So in this example each uh, you can see each element is converted into this react dot create element function and into the format given below. Let's take a look into what our react dot create element actually returns. So on the left side we have react dot create element. Uh, we have a dev string, a ID container, H1 element and AP element. So when this function runs, it returns this JavaScript object on the right here. Uh, it just adds these properties, type props, children, etc etc. And these are the virtual Dom nodes. You can call them the virtual Dom nodes, but these are not the real Dom nodes. And this is just an instruction on how to create the Dom nodes. And even these virtual Dom nodes, they are thrown away after fiber nodes are created. We're going to look into what fiber nodes are and how they're created. But essentially this JavaScript object is used to create the fiber node, which the fiber node is going to persist in the memory, not this object. OK, so now we know that react dot create element function, uh, creates this JavaScript object that we can see on the left here. But this does not persist in the memory and this is discarded on every render O. What actually happens under the hood is we run reconcile children function. And we pass in this JavaScript object on the left and create this new JavaScript object called the fiber node. The fiber node is much more richer. It contains a lot of more information, all of the pointers, all the relationship between its children and siblings and the parent as well. It contains the real Dom reference and all of the state as well, the hooks as well. And uh yeah, so this is the node that persist in memory. Across the renders. OK, so let's review our build step again. In during our build step, our application, our app component has been converted into these react dot create element calls and above React 17 version it is converted into this under score GSX calls. But it returned the same JavaScript object in both of these. OK, now let's look at our rendering step, our rendering phase. Where does our rendering phase begin? This hasn't been actually executed yet in the build step, there's only it's only converted into this text. So the first thing is create root function is executed. And uh. Three root function creates your first fiber node. It's called the host root and it's currently is null. And it also contains creates this JavaScript object called fiber root node. And next we run this render function. On on this line. Reactor grade element. Parentheses abdominal. So here's our component tree and here we run this while loop. Until our whole component tree is parsed, we basically perform 2 functions. There's two really important function that is performed on each node of this component tree. The first function is called begin work and the second is called complete work. So when parsing down this tree from the app component is going to parse down to its children and it uses Deb. Traversing algorithm. And is going to visit each node. So on going downwards, it's going to perform begin work on each of these. And when hitting the leaf node is going to perform the complete work function. So begin work basically calls your component and it runs the component which we talked about this reactor create element. When runs it returns this JavaScript object. Uh, that we talked about and that is fed into the. Fiber three Fiber node is created from uh from the JavaScript object. So this whole loop runs, yeah, so you can see that, uh, begin work is called on the app. So let's see step by step. So this is a horse fruit is our first fiber node. Then we're gonna. Attach this here. So the while loop has been started. And this is going to run. We're going to call begin work function on our app component. Over app component is going to run and it's going to return this JavaScript object from react create element. And next we're going to call reconcile children function. This is going to create the fiber nodes. Similarly, the whole tree is parsed. Let me just, uh. OK here. So the begin work runs on each of these. Nodes. And these are all fiber nodes. Fiber nodes are created in the memory. But uh, when it reaches the leaf node, it's going to first run the begin work function. Then since it's a leaf node, there's no more children of H1. This is going to call the complete work on this node. So it's going to call complete work on H1 node. And uh. Complete work calls the real Dom API. This is where your real Dom components are being created, and this is all in memory right now. So next is going to traverse this through depth. First it's going to call begin work here. Then after calling the begin work this it doesn't have anymore children and this node is already created so it's going to call complete work. And similarly, we're going to keep calling complete work. Until we reaches the top component here. So this is the whole rendering process. This whole process is in memory and this is how our fiber tree is built. It's completely parsed and the real Dom nodes are attached to this fiber tree here. So our rendering is completed, the rendering phase is done. Next, your commit phase begins. After parsing the whole component tree, the commit phase begins. It takes your Dom that you have built in your memory and. It attaches it to the top level root division of your React application, which is normally. Uh, dev root, right? And it's this, uh, def tag and it contains the ID root. And now your browser renders your whole Dom and the user can see your application. So yeah, that was our build phase, the rendering phase and the commit phase. We saw how our app component is transformed into these reactor grade element calls. How it is. Parsed, our fiber tree is built, our Dom tree is built in memory, and finally in the commit phase it is attached to the root dev or application. And we see that our code live in the browser. In the next video we'll talk about. How rerendering works and what changes are performed in the componentry in the fiber tree? How does reconciliation work? Thank you.
Scroll events giving you headaches? 😩 There's a better way.
The Intersection Observer API lets you detect when elements enter the viewport — no scroll listeners, no layout thrashing, just clean and efficient JS. ⚡
I just published a full breakdown with real code examples, tips, and common mistakes to avoid. 🔧
Read it now 👉 hamidrazadev.com#javascript#webdev#frontend#learntocode#100daysofcode
Understanding the React Component Lifecycle 🌿⚛️
Every React component goes through three key phases:
🟢 Mount – when the component is created and added to the DOM
🔵 Update – when state or props change, triggering re-renders
🟣 Unmount – when the component is removed from the DOM
With modern React, the useEffect hook ties it all together:
Runs after mount (initial render)
Runs after updates (when dependencies change)
Can clean up on unmount (return function)
useEffect(() => {
// side effect here
return () => {
// cleanup on unmount
};
}, []);
Mastering this flow helps you manage side effects like API calls, subscriptions, and timers cleanly and predictably.
#React#WebDevelopment#Frontend#JavaScript#ReactJS#Coding
If your React component has isLoading, isError, isEmpty and isSuccess as separate props, you have a problem.
I have written this exact code. More than once.
It starts small. You add isLoading to show a spinner. Then isError for the error state. Then isEmpty because the empty state needs its own UI. Then isSuccess for the confirmation screen.
Now you have four boolean props. And they fight each other.
What happens when isLoading and isError are both true? Which one wins? Nobody knows. The component does not know either. You just hope the parent passes the right combination.
This is Boolean Prop Hell. And it is sitting in most React codebases right now.
Booleans feel simple but they hide impossible states.
4 boolean props = 16 possible combinations.
Your component can only handle maybe 4 of them.
The other 12 are bugs waiting to happen.
Replace all of them with a single status prop.
One value. One source of truth. No impossible combinations. The component always knows exactly what to render.
This is how every serious component library handles it. There is a reason for that.
When you find yourself adding another boolean prop, stop for a second.
Ask: is this a new state or just a variation of an existing one?
Most of the time you do not need a new prop. You need a better status model.
Before and after in the screenshot below 👇
#ReactJS#Frontend#WebDev#JavaScript
React allows accessing the latest props and states in useEffect/useLayoutEffect without causing re-renders.
The useEffectEvent hook will help achieve this.
The hook helps extract non-reactive logic from useEffect webhooks. Non-reactive logic refers to when we don't want to perform any action.
The useEffectEvent hook wraps a callback function and returns an Effect Event function, and whenever it gets called, the function has access to the latest props and state.
So, it won't trigger a re-render, unlike in the case of dependency arrays.
But it's not the replacement of the dependency array, as that is usually required to trigger effects.
You should try it in your workflow as per the use cases.
#react#javascript#frontend#hooks
One small habit I've been practicing for the last few months when building Alpine.js components.
Not every variable in a component is meant to be reactive, so I don't like defining everything as a direct property inside `x-data`. Instead, I prefer to place component constants in a separate method called `initNonReactive`, just to keep things organized.
When you revisit a component after several days, it instantly gives you a clear picture of which properties are intended to change and which are not.
#AlpineJS#JavaScript#WebDevelopment#Frontend#CleanCode
Have you ever hit the “why is my input resetting on every render?” bug?
➤ Defining a component function inside another component creates a new function on every render 🔄🧠
➤ React can treat it like a different component type 🎭❓
➤ Result: inputs/state can reset repeatedly 🔁⚠️
➤ Fix: define components at the top level (outside the parent component) 🔝✅
#React#JavaScript#Frontend#Debugging#BestPractices
Why does React say: "Don't call hooks conditionally"? 🤔
Let’s break it down simply.
React doesn’t track hooks by name.
It tracks them by order.
Every render, React just walks through hooks like this:
1st hook → 2nd hook → 3rd hook
That’s it. No labels. No IDs. Just position.
Now imagine this 👇
if (condition) {
useEffect(() => {
// do something
});
}
👉 First render:
Hook1 → Hook2 → Hook3
👉 Next render (condition = false):
Hook1 → Hook3
Now React gets confused 😵
It expects Hook2… but suddenly sees Hook3.
This breaks the internal hook mapping — and boom 💥 unexpected bugs or crashes.
👉 The rule exists because hooks must run in the same order on every render.
That’s why:
❌ No hooks inside conditions
❌ No hooks inside loops
❌ No hooks inside nested functions
👉 Always call hooks at the top level.
Once you understand this, React hooks feel much less “magical” and more predictable.
#ReactJS#JavaScript#FrontendDevelopment#WebDevelopment#LearnInPublic
React Error Boundaries are basically try/catch for UI rendering. Without one, a single broken component can crash the whole screen.
With an Error Boundary, React catches the failure and shows a fallback UI instead. Even better: with react-error-boundary, you can also handle async errors using showBoundary().
You can get example code from my blog:
https://lnkd.in/gDYnB7h5#React#Frontend#JavaScript#WebDevelopment
✨ 𝗗𝗮𝘆 𝟳 𝗼𝗳 𝗠𝘆 𝗥𝗲𝗮𝗰𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 ⚛️🚀
Today I learned about the `𝘂𝘀𝗲𝗥𝗲𝗳` 𝗵𝗼𝗼𝗸, and it felt a bit different from other hooks.
Unlike state, updating a ref doesn’t trigger a re-render. That makes it useful for storing values that need to persist between renders without affecting the UI.
I also learned how `useRef` can directly access DOM elements, which is helpful for things like focusing inputs, managing scroll, or interacting with elements when needed.
What stood out to me is how React gives controlled ways to interact with the DOM without breaking its flow.
#ReactJS#JavaScript#WebDevelopment#LearningJourney#FrontendDevelopment
Amazing work brother