React Interview Questions Senior Level (React Fiber, Reconciliation, Virtual DOM)

Summary

In this detailed video, experts explore complex senior React interview questions, focusing on React Fiber and the reconciliation process. They explain how React Fiber improves rendering efficiency by allowing asynchronous updates and pausing during rendering, which contrasts with the traditional synchronous virtual DOM approach. The discussion highlights the importance of prioritizing updates and utilizing the diffing algorithm for efficient UI rendering. The presenters emphasize the need for developers to understand the underlying concepts of React, particularly for those aiming to excel in a competitive job market. The video serves as a valuable resource for deepening React knowledge and interview preparation.

Takeaways

• 😀 React Fiber is an intermediate data structure introduced in React 16 that enhances the rendering process by allowing asynchronous updates.
• 🕒 Unlike the traditional virtual DOM, Fiber enables React to pause rendering tasks, improving responsiveness during high-priority updates.
• 🔄 The reconciliation process in React has evolved; Fiber allows for building a Fiber tree to manage updates more efficiently.
• 📊 The ability to prioritize updates means that user interactions (like typing) can be handled immediately, while less urgent tasks can be paused.
• 🔍 React's diffing algorithm compares the new virtual DOM with the current one to determine necessary changes before committing to the actual DOM.
• 🗝️ Stable and unique keys are essential for optimizing React's rendering process, preventing unnecessary updates.
• 🚦 React's scheduling capabilities allow it to handle low and high-priority updates, leading to a smoother user experience.
• 📚 Developers should focus on mastering JavaScript fundamentals and browser APIs to fully grasp advanced React features.
• 🧠 Senior React developers are expected to have a deeper understanding of Fiber and its implications for performance.
• 👥 The learning curve for React has increased, and understanding these complex concepts can help developers stand out in a crowded market.

Q & A

What is React Fiber and how does it differ from the Virtual DOM?

React Fiber is an intermediate structure introduced in React 16 that allows for asynchronous rendering, meaning rendering tasks can be paused and resumed. In contrast, the Virtual DOM is a synchronous process where changes are computed and rendered in one shot.

Can you explain the reconciliation process in React?

In the reconciliation process, React triggers a re-render of components when a state change occurs. Traditionally, this meant traversing the component tree recursively to render all components in a synchronous manner. With React Fiber, it allows for building a Fiber tree, which can handle updates asynchronously.

What are the advantages of using Fiber over the traditional Virtual DOM approach?

Fiber allows for prioritized updates, meaning React can pause lower priority rendering tasks in favor of higher priority updates, such as responding to user input, leading to a more responsive UI.

How does React manage memory and prevent memory leaks with the Fiber tree?

React optimizes memory management by reusing existing Fiber nodes whenever possible. If a component does not change, React retains a reference to the previous Fiber node instead of creating a new one.

What is the role of priority updates in React Fiber?

Priority updates in React Fiber help to manage rendering based on user interactions. High priority updates, like user input, are processed immediately, while low priority updates, such as fetching data, can be paused and resumed later.

What are the key characteristics of the diffing algorithm in React?

React's diffing algorithm relies on two main heuristics: if the type of an element changes, all children are discarded and re-rendered, and it assumes keys are stable and unique to optimize rendering by allowing fast comparisons.

Why should developers avoid using array indexes as keys in React?

Using array indexes as keys can lead to issues with component state management. If an item is removed, the order of elements changes, which can cause React to misidentify components that need re-rendering, leading to unexpected behavior.

What browser APIs does React Fiber utilize to enhance rendering performance?

React Fiber uses APIs like 'requestIdleCallback' to check if the browser is idle and can perform background rendering, and 'requestAnimationFrame' to commit changes just before the browser repaints the UI.

How deep should a developer go in understanding React Fiber and its internals?

The depth of understanding depends on the developer's role. Senior React developers should understand the internals to stand out in the job market, while mid-level developers can focus on high-level concepts and the motivations behind React's design.

What are the fundamentals a React developer should master to effectively use React?

A React developer should strengthen their understanding of JavaScript fundamentals, data structures, and browser APIs. This knowledge forms the foundation for mastering advanced features in frameworks like React.

Outlines

00:00

😀 Understanding React Fiber and Virtual DOM

In this section, the speaker discusses the concept of React Fiber, introduced in version 16, which serves as an intermediate structure between React elements and the Virtual DOM. Unlike the traditional synchronous rendering process that can lead to blocking the UI, Fiber allows for asynchronous rendering. This means that React can pause the rendering process to prioritize high-priority updates, making the user experience more fluid. The speaker explains how Fiber builds a tree of components, which helps in reconciling state changes and rendering efficiently. This section also touches on the advantages of Fiber over the Virtual DOM, highlighting the ability to pause and resume rendering operations.

05:01

😀 The Reconciliation Process in React

The speaker explains the reconciliation process in React, contrasting traditional methods with the Fiber approach. In the past, state changes triggered a complete re-render of the component tree, leading to potential UI blocking. With Fiber, React constructs a Fiber tree that allows for a more optimized rendering process. This new structure facilitates asynchronous operations and helps avoid memory leaks by reusing Fiber nodes where possible. The discussion emphasizes the importance of prioritizing updates based on user interactions, differentiating between high-priority and low-priority updates, and the implications for UI responsiveness.

10:05

😀 React's Diffing Algorithm and Virtual DOM

In this segment, the speaker delves into the diffing algorithm used by React to compare the Virtual DOM with the current DOM. The speaker describes the challenges of tree comparisons and explains how React optimizes this process using heuristics, such as discarding child elements when their type changes and relying on stable keys for fast comparisons. This section highlights the significance of using unique and stable keys in lists to avoid rendering issues. The discussion also touches upon the complexities of React and the knowledge required for developers to navigate these intricacies effectively.

15:07

😀 Navigating Complexity as a React Developer

The final part addresses the complexities introduced by React Fiber and the expectations for developers at various levels. The speaker advises that the depth of understanding required depends on the developer's role, suggesting that senior React developers should delve deeper into the internals, while full-stack developers may focus on high-level concepts. The discussion also emphasizes the importance of mastering browser APIs and JavaScript fundamentals as foundational skills for understanding advanced React features. The speaker encourages viewers to strengthen their core knowledge and highlights resources for further learning.

Keywords

💡React Fiber

React Fiber is an advanced reconciliation algorithm introduced in React 16 that enhances the rendering capabilities of React applications. Unlike the traditional rendering process, Fiber allows for asynchronous rendering, enabling React to pause and resume rendering tasks based on priority. This capability is particularly important for creating responsive user interfaces, as demonstrated in the video when discussing how high-priority updates, like user interactions, can take precedence over lower-priority tasks.

💡Virtual DOM

The Virtual DOM is a lightweight copy of the actual DOM that React uses to optimize updates to the UI. It allows React to perform efficient updates by determining the minimal set of changes required when the state of an application changes. In the script, the Virtual DOM is contrasted with the Fiber tree, illustrating how React uses it primarily for diffing and committing changes to the actual DOM, thereby improving performance.

💡Reconciliation

Reconciliation is the process by which React updates the UI to reflect changes in application state. It involves comparing the current Virtual DOM with the new Virtual DOM to identify what has changed. The script explains that traditional reconciliation can block the UI due to its synchronous nature, while the introduction of Fiber allows for a more efficient, asynchronous reconciliation process that improves responsiveness.

💡Asynchronous Rendering

Asynchronous rendering refers to the ability of React to pause the rendering of components and resume it later, allowing for smoother user experiences. This is made possible through Fiber, which facilitates a priority queue for managing updates. In the discussion, the importance of handling high-priority updates, such as user inputs, while delaying lower-priority ones, is emphasized to ensure that the user interface remains responsive.

💡Priority Queue

A priority queue is a data structure that allows React to manage updates based on their importance. In the context of Fiber, updates are categorized by priority, enabling React to handle urgent user interactions immediately while deferring less critical tasks. The script highlights this concept by explaining how React prioritizes user inputs over data fetching, ensuring a seamless experience.

💡Diffing Algorithm

The diffing algorithm is a mechanism that React uses to compare two Virtual DOM trees to determine what changes need to be made to the actual DOM. The algorithm is optimized to minimize the number of operations required to update the UI. In the video, it is noted that this algorithm's efficiency is crucial, especially when dealing with large lists of elements, as it can significantly affect performance.

💡Fiber Tree

The Fiber tree is a data structure that represents the components of a React application during the reconciliation process. It contains information about each component's state and props, allowing React to perform incremental updates. The video discusses how the Fiber tree serves as an intermediary between the Virtual DOM and state changes, enabling features like pausing and resuming rendering.

💡Memory Management

Memory management in React refers to the strategies used to handle memory usage effectively during rendering and updates. With Fiber, React can optimize memory usage by reusing fiber nodes for components that have not changed. The script mentions that this optimization helps prevent memory leaks and ensures that the application runs smoothly without consuming excessive resources.

💡High-Priority Updates

High-priority updates are tasks that require immediate attention from the React rendering engine, such as responding to user interactions like typing or clicking. These updates are processed before lower-priority tasks, ensuring that the UI remains responsive. The interview highlights how Fiber allows React to manage these priorities effectively, improving user experience even when other background processes are occurring.

💡Keys in React

Keys are unique identifiers used by React to track elements in a list, enabling efficient updates and re-renders. They play a critical role in the diffing algorithm by helping React determine which elements have changed, been added, or removed. The video underscores the importance of using stable keys to avoid rendering issues, particularly when elements in an array are dynamically modified.

Highlights

Introduction of React Fiber, an intermediate structure that enhances rendering efficiency by allowing asynchronous processing.

Fiber enables the reconciliation process to be paused, allowing React to prioritize higher urgency updates.

Difference between the traditional virtual DOM and Fiber's approach to building the UI tree.

Description of how the reconciliation process traditionally blocked the UI during rendering.

Introduction of the concept of 'low priority' and 'high priority' updates based on user interactions.

React's approach to rendering includes copying the current Fiber tree to manage updates in the background.

Importance of memory management to prevent leaks with the Fiber tree.

Understanding of priority queues and how they enable more fluid user experiences in React applications.

Overview of the diffing algorithm and its efficiency in comparing virtual DOM trees.

Explanation of how keys are used in React to optimize re-renders and avoid inefficiencies.

Advice for developers on how deep their understanding of React should be based on their roles.

Recommendation to start learning about browser APIs that underpin concurrent rendering in React.

Encouragement to strengthen JavaScript fundamentals to better understand advanced React features.

The significance of the React community and resources available for developers looking to deepen their knowledge.

The role of prioritization in React helps maintain a responsive UI, even with complex updates occurring in the background.

Transcripts

so today we will answer some of the

hardest senior react interview questions

our m is cut in real frontend interviews

we are going to Deep dive into Concepts

such as concurrent react react fiber the

reconciliation process and the virtual

Dome Bon is going to answer the

interview questions but also give you

the mental models and the reasons why

behind his explanations Bon are you

ready yes let's go and let's go with the

first question what is react fiber and

how is it different

from the virtual Dom perfect so I'm

going to go ahead and share my screen

for this one uh what is react fiber and

how is it different from the vual

Dom well to put this simply back in the

days we had our react elements that

would create a virtual Dome node and

then that will be translated into an

actual Dome node with reconciliation but

the problem with this is that it's a

very synchronous process that means

imagine we have a huge of elements we

need to render all those like comput the

state and with jsx compute the vual D

node all done singly in one shot and

then render the D and what react

introduced in uh version 16 with react

synchronous is the fiber node which is

an intermediate structure that gets

created and basically all the work of

rendering component is done by fiber by

this fiber node so just like you had a

threee of visual Dom nodes now you have

a fiber tree whenever we need to reender

we work on this tree we compute the new

state we run certain life cycle methods

and once we are done we can then compute

the V D from the fiber tree and the big

advantage of having this structure and

the why behind it is that differently

from the virtual node and traditional

rendering the fiber reconciliation can

be paused so we can actually pause you

know when we go into the fiber and we

have a higher priority update we could

actually pause this do something else

and then come back to this and that was

not possible before for fiber so that

would be the big difference where the

visual Dome is only used now to actually

compute the differences to the Dome and

the fiber it's a new intermediate

structure that allows us to pause and

prioritize the render process to make it

asynchronous or what they call concurent

react cool Bon um this leads me to our

second question today which is can you

explain the reconciliation process in

react and also if you can tell me what

does the introduction of react fiber

mean means for the reconciliation

process as well so in the reconciliation

in traditional reconciliation we had our

component it will trigger a state change

and that will trigger a reender of the

component three and rendering means we

would go from the root node the root

component all the way to the children

all the way to what we call the leaf

noes the very bottom components and run

the render function recursively and we

would put that in the call stack so all

these things will be into the call stack

all the way to the bottom then we will

would execute them and finally from that

we would extract the new virtual Dom

that's what they call the stack Recon

shizer and this one it's kind of

synchronous in the sense of imagine we

have a huge component Tre we would need

to put recursively all those render

functions in here finish them and then

finally render when we have a huge

component threee you might have what we

call a blocking UI imagine we're

fetching some data and rendering things

on the screen if you are completing a

form at the same time as a user you

would perceive that form as

non-responsive Ive because the cold

stack is busy by rendering this

components that are being fetched and so

we can't really reender for example the

UI the browser cannot repaint so maybe

you're typing in an input field but you

don't see anything happening so that was

kind of the old reconation process and

after that we had our vome we would make

our diffing algorithm and finally commit

to the Dome the changes needed that was

uh how react used to work with fiber

things are a bit more complex so

what react does is from the component

tree it will build what we call fiber

tree and a fiber is nothing but let me

zoom in I think I have a fiber around

here it's a JavaScript object and inside

there's many properties but probably the

most important are the state and the new

props right the props the component has

the memorized props everything you need

about the component the function that

runs it the siblings and the child are

all here and so react will create a

fiber tree with this internally right

and it will run the render function for

all the for that fiber tree and from it

it will deduct the virual D and then the

process is just like before the virual

do gets compared with our ding algorithm

and we commit changes to the do so far

nothing changed but we have this

intermediate

step nice now what I still don't

understand B is right now we have the

fiber tree right as a in in between the

ritual Dome and the state changes and

I'm wondering why why the fiber why do I

need fiber in the first place right

because it adds extra complexity and I'm

wondering what does fiber allows me to

do that the vual Dom couldn't you you

mentioned this a synchronous rendering

right could you expand a bit on that

because it feels to me like it's it's

adding a lot of complexity react was

already complex the diffing algorithm

was already complex and now we have a

stage in between that's kind of

definitely adding another layer of

abstraction of complexity um is it white

it do we really need why and why do we

really need this step

this 5

by3 yeah very very good question so what

the f by3 allows us to do is that it

works together with a priority queue and

a scheduler and rather than having this

process synchronous like we really like

as I explained before about the the

stack reconciliatory we would go like

have to run the whole render in one shot

we can actually pause we can actually

stop at a certain node pause and do

something else and then come back to

this render the way that's done and I'm

going to try to explain it really

quickly is that whenever a an update um

let's say imagine a set State happens an

update gets attached to this 5 by3 so

let's imagine there's a state change

here for this form component there is an

update queue for this form component and

that change that will be cued there and

what react will do after that is to copy

the current fiber tree in the background

and do work on it that means just go

through each node and see if there's any

update and compute the new memo State

and run the render method but it does

all this in the background and so that

means while react does all this right

imagine we have a huge component um it

can actually it does it asynchronously

it doesn't take all the main thread to

do this basically what react does is it

goes to our main thread to the web

browser and calls this function which is

uh I do not have it here but it's called

request eedle call back which basically

it tells the browser hey um do you have

some free time are you eidle and the

browser says yes I am eidle and I will

let you do some work for around 50

milliseconds that's the default in the

browser and then react goes and starts

doing this work right tick tick TI it

doesn't need to finish yeah it will just

do some work when react finished the the

frame budget we call it that way like

the browser says okay you've done enough

but now I need to free the main thread

to repaint or reender the UI then rect

will pause everything and this was

impossible before you really needed to

finish the render before doing anything

else one follow-up question that comes

to my mind is how can we manage all this

in memory I mean how can we prevent

memory leaks the whole fiber Tre will

basically stay somewhere in memory and

we're kind of adding changes to those

and how can we make sure nothing nothing

goes wrong so what Rea does really well

is to reuse a lot of the fiberry so you

see when we create this new working prog

that we are rendering um a lot of these

nodes are copied especially if react see

that they didn't change so if imagine

one of those fiber uses the use memo

hook or the react. memo and the props

didn't change react will not reender it

will just maintain a reference to the

previous one so it's very optimized and

it tries to reuse as much as possible of

the previous fiber Tre mhm understood

understood so it's it's kind of prepared

for that to be as if ient as possible

and and not not use too many resources

you mentioned a high priority update how

how does that work what what do you mean

by that what I mean is that imagine we

are fetching some data and rendering a

huge list of elements that would be a

low priority update because it's it's

nothing that we need to instantaneously

show to the user whereas whenever the

user is typing something on an input

field and we want to show a focus or an

outline on that input field or even an

error message we want to react to user

input input then yes that will be a much

higher priority update so react will

pause this low priority render it will

create a new working progress three for

the high priority um update finish that

one commit like compute the virtual Dome

and commit the changes to the Dom and

then go back to the low priority update

that's why it's called concurrent react

or synchronous react because you can

actually use a priority queue to under

the hood prioritize those updates so for

the end user even if we're doing a lot

of background work the UI feels a lot

more fluid here's basically the list of

internal priorities that the react

developers added to the framework the

top priority would be a discret event

like if they click or they type on an

import the second one would be if they

scroll and we need to show something on

screen because the user scrolled a

normal priority would be something like

data Fetch and a very low priority would

be a route change for example and all

this is internal to the react codebase

we don't need to worry about it but it's

important for us to know that this is

how react handles now um reenders in

updates that's quite a bit of complexity

out would say for the average react

developer and I have a follow-up

question prepared uh but first let's

answer the third question that I had uh

prepared here which is what can you tell

me about the diffing algorithm and the

virtual D so as I mentioned this render

process it's it can be paused and as

synchronous but whenever we finish this

we have a synchronous phase which is the

commit phase which is I know what Chang

I need to do and now I'm going to commit

them to push them to the actual Dom so

what we do is once we have each fiber

tree um finished and we have the memory

State we can compute the Von the new

virtual Dome this didn't change much

with previous react we will compare the

vome the new one with the current fatal

Dome and try to figure out the

differences now traditionally comparing

to trees like that would take I think

the big o for this would be n to the

thir so n n by n by n n being the number

of elements so imagine we have a

thousand elements it will take a billion

operations to actually compare those

threes wow so yeah so react has two her

istics uh which is it basically assumes

that if the type of an element change so

if this form is not a form anymore then

it will discard all the children and try

to recompute that so because that's a

lot cheaper like rendering that from

scratch is a lot cheaper than comparing

everything so that's the first one which

is you know if different type then redo

and the second one is assume

key are stable uh I'll get in a second

into keys they they're stable and unique

so whenever we have a list of elements

we react will ask for that key prop and

it will use that to actually really fast

compare those elements if our keys has

are not stable that means they change

values all the time we're pushing a lot

of new work um and if they're not unique

react won't be really able to use them

because it really tries to identify a

leaf tree with a key so imagine here we'

have um 15 inputs it would use that key

to differentiate which ones do I need to

reender which ones I don't have this is

why for example you should never use

array indexes as keys in a component

because they're not stable right exactly

because if you delete an element in in

position five of the array all the

others will shift and all of a sudden

maybe react doesn't reender element

number six even if the actual content or

the underlying state has changed so

these are the tra of her istic and you

need to know this as a developer in

order to really avoid having weird

issues so of course I have a followup

question prepared for that but I just

wanted to take a break and for everyone

watching last you're probably watching

this video because you interviewing

right now and I guess you are a

JavaScript engineer whether it's know

front end with react or frontend general

full stack even backend develop right

now then we have a present for you so we

prepared a free technal assessment for

you to understand what your technal gaps

are and to also adjust your interviewing

process and try to fix those gaps for

you to perform in your next teal

interview it's available for free in the

comments the link is going to be there

and you can go to the C website and take

it um and I wish you the best of luck we

that being said my my you know my big

question right now B is after seeing all

this stuff I mean react was already you

know the learning curve was quite Steep

and the framework itself is BEC becoming

pretty complex I mean you you spent a

few hours to have this kind of thinkal

depth this knowledge is also not readily

available online so you have to kind of

dig deeper into the the source code the

documentation so my the million dollar

question is much how deep should a the

average you know re developer go how

much should a mid level developer know

how much should I react engineer know I

guess to answer that it very much

depends of what kind of developer you

are if you are a senior full stack

developer a bit more spread out you

cannot really spend so much time in

react and so I would just learn maybe

the motivation of the reac team behind

it and a top level API but if you are a

senior react developer what we have seen

in the market is that it did became a

bit more overcrowed than it used to be

and so this level of technical depth

I'll talk daunting it will get help you

stand out in in the uh in an already

overcrowed market and the good news I

have for everybody else is that the data

structures that are being used like qes

and priority hips and trees they will

develop your thinking model and your

language and so you don't really lose by

going this deep if you're a senior react

developer I think you will have to go

pretty deep into it because this is your

thing you are a senior react developer

if you're a senior frent developer also

but if you're a senior for stack I would

just look at the top level ideas behind

it and try to understand the motivation

of the reacting behind it you will not

have to interact with the fiber directly

at any point as a developer so there's

no need to go too deep into it and if

you're a react developer trying to

deepen your knowledge in about react

internal staring to learn more about

fiber 3 where would you start I would

start with the browser apis there are

two main functions that they built

concurent react around which is request

e callback which is hey the browser is

free and says you can give me some work

to do I will do it in the background and

that's when react starts rendering and I

think the other one was request

animation frame which is the browser

saying I'm going to repaint and rerender

the UI is there anything really quickly

that you want me to do before and that's

when react commits changes to the Dom

high priority changes so you see them in

the next refresh in the next repaint if

you learn those first of all you can use

them in other Frameworks and then you'll

realize that everything they built into

fiber was to be able to use these apis

in a concurrent mode and that's why they

added a priority cue to it and and the

whole fiber thing so I would start there

which is why folks and for the people

watching us you will see this across the

whole sentive Channel and across

everything we do but fundamentals are

the way to go right because as you can

see whatever Frameworks are trying to

build upon it's always upon basic

browser functionality and JavaScript

fundamentals right uh we talked about

basic data structures without we about

the call stack and as you can see when

Bon was actually explaining and going

through the fiber explanations he did a

a complexity analysis he was always

referring to data structures that are

agnostic and to JavaScript

characteristics that are built into the

language so if you're really funny

enough if you really want to master the

advanced features of a framework like

react you actually need to master and

strengthen your fundamentals first if

you're interested into strengthening

your fundamentals then you're in the

right place make sure you subscribe to

the channel let us know in the comments

if there's any other advanc re question

senior level question that you want b i

to cover or if there's anything in this

video that you want us to go deeper in

into and we expect a lot more videos

like this coming your way ban thank you

so much and we will see you folks in the

next one