Shadowing Practice: The React Interview Questions You need to Know - Learn English Speaking with Video

five most frequent React interview questions

and they actually cover up all the fundamentals of React and

if you actually understand these five

that means you're basically understanding how React works from rendering to basically SSR to global state management

and pretty much everything you need to know.

The first question or the first most frequent React interview question is how to pass data from child to parent.

We all know that React has actually the parent-child flow diagram with like data flowing.

So like it flows from the parent, which is, you know, always on the top and it flows down to the child.

But now how do we take it actually the data, how let's say a child wants to communicate with the parents

and actually send a piece of data from the child to the parent.

How can we do that?

So let's imagine we've got this simple react component, which is called the parent component that has a child called child component.

And that inside of the child, we've got like an input.

So what we want is actually whatever we put inside of the input, we want to send that piece of data from the child right into the parent.

So how can we do that?

So simply just declare a state in here on the top and you declare the state on the parent.

For example in here, you know, just to be able to receive the data from the actual child.

So you do like data from child and set data from child.

You create a simple handler that is like handled data from child

that's going to receive the actual data received from the child and actually update the state with that piece of data.

And simply in here on the GSX, you just pass in the send data to parents, and you just bind it with your handle data from child callback,

which means you're just basically grabbing the data and actually just setting the data on your own local state.

So now on the child in here, we just simply have an input and everything.

But also like whenever we do on change, that means whenever every single keystroke that happens to be on the input.

So every single key stroke in here, we do actually through props, every cool props, because this actually being pass through props, the send data to parents, we call it through props in here,

and we pass in the value we want to send back to our parent.

And of course, the value is going to be like whatever we type inside of the, like particularly the input in here, and everything is going to flow up into the parent component here,

is going to be stored locally into the data.

And everything is going to flow up into the parent component here, is going to be stored locally into the data from child state.

And now, of course, we can use the data from child state in here to basically render whatever we want.

And then on, of course, we can go ahead and render the data from child state in here to actually, you know, showcase and display the data received from the child component.

So this is basically what our example looks like.

We've got a parent component here on the top.

Right now, for example, the child input in here is empty.

So we've got nothing.

But if you type something on it, like hello from the other side or something, you're going to have basically this is going to flow on every single keystroke.

So like on every single key stroke you type in here, it's going to flow back into the parent.

And that's how you basically pass data from child to parent.

The second question is how to render an element outside of the component scope or the components tree.

For example, let's imagine we've got this real simple component here, which is called render elements outside tree.

And instead of that, we've got a div.

And instead of the div, we've got a paragraph and a button.

So that means wherever we're actually going to render this element, those two, like the paragraph and the bottom,

I'm actually going to render inside of the tree depending on where we place that particular component.

So for example, for our case in here, we're actually placing the render element side tree inside of the GSX up in here, which means basically inside of the root,

inside of like the main element in here.

Of course, for our up component, if we go to the main.gsx, the up component is going to be directly rendered inside of the root.

And if we track back the root, The root is basically, you know, a div inside of the body in here.

So the body is actually, you know, the parent of all dom nodes.

Then it actually comes right after the root in here.

And of course, we render all of our React components and elements inside of React.

And of course, we render all of our React elements and components inside of this root container.

So now from this element, what we want is actually we want to render a particular element.

Let's say we want to render a paragraph.

but instead of rendering it inside of the root in here

and inside of the tree we want to render it directly to the body from this component.

I mean you might probably be thinking oh that's not really passable how am I supposed to do

that or why not just go ahead and have another component

and just like put another DOM node in here

and actually say oh you can render it over here

but like for us actually React provides a really really nice API

that is called portals that allows you to do exactly that easiest way possible.

So with portals, we can actually go ahead and import the create portal function or method from the React DOM.

That's basically going to allow us to render a child component or a child React element in here.

And actually, the second argument will specify where to render it particularly.

So here we are actually grabbing the DOM node in here by doing document, getElementsById, and we do model to grab this model in here.

So that means it's going to grab us this reference to this particular domino

that has an ID of model in here and we're just going to render this paragraph right inside of it.

So technically this paragraph is not going to be placed in between the first paragraph and the button, but instead it's going to be completely placed outside of the current tree.

So if we go ahead and look at it, there you go.

So we've got the first paragraph in here.

This is actually the last button in here.

And the one that actually is specified using a portal, it's actually being rendered completely outside into the modal container.

This child is placed inside the document body in here.

And if you try to look into it, if you go inspect in here, go to elements.

Now, if you look inside of the body in here, inside of the body, we've got the roots, which has pretty much everything.

And if you look at the modal, the modal basically has this.

So it has the paragraphs we're rendering using our portal.

And that's simply how you render a component or elements outside of the react tree.

The third one is how to implement code splitting in your react app and why.

And by code splitting in here, we also mean lazy loading of react components.

So that basically the question in here covers both of the topics.

So lazy loading is basically deferring loading components code until it's rendered for the first time.

And that's basically used when you have a lot of components and a big projects or mid-sized projects.

And you lazily load components on demand, only on demand,

to basically make the main bundle of the application or the website smaller and actually easier to be loaded

when the website is firstly visited by a person or something and only load those functionalities,

those extra functionalities or extra components when they are needed on demand.

So lazy loading is officially supported by React, of course, and it has an API for it that's called lazy loading it has a function

that allows us to do that and suspense and everything

and it uses javascript promises behind the scenes to handle the lazy loading components

so for example in here we've got this simple component here called lazy load model

and let's imagine this one has actually a button where it loads

when you click on that button it's called like open model

so when you click on it it opens a particular model

or a dialog for you

and let's say we want this dialog to be only lazy loaded

when the button is clicked so like when this component is rendered the model is not going to be loaded whatsoever.

It's only going to be loaded when the button is clicked and the model is about to be opened.

100

Let's say, for example, this model has a lot of code

101

that we don't want to actually initially load into our bundle to make our website

102

or React application lightweight and smaller and easier to be loaded over the network and everything.

103

And of course, our model component here is just a normal component.

104

If you go inside of components, model.gsx in here, just a normal component.

105

It uses GSX to render stuff with Tailwind and stuff like that.

106

So it's pretty easy, pretty simple.

107

And the way to lazy load is actually using the lazy function that is actually going to be imported from React.

108

So you do lazy, you actually return a callback on it.

109

So you do a callback in here and you do import component model.

110

Now you don't need this delay for demo because I'm actually just delaying this just to see the demo.

111

But the simple way you need to do is actually use the import and you use the import as a function, not like the normal import we're used to do,

112

but import with a function in here that's going to actually return a promise for you

113

and you give it the path of the component that you want to lazy load.

114

And this return a promise, if you look into this, it's going to be a promise and it's going to only be loaded when you actually call and render this modal component.

115

Now, the way you use modal in here

116

and the way to render the lazy loaded modal

117

or other component you actually lazy load in is by just calling it and putting it inside of Suspense.

118

So you import Suspense in here from React.

119

Suspense basically allows you to display and render a fullback UI like a loading UI

120

while this model is lazily loaded over network.

121

Because of course, this is not going to be loaded initially.

122

It's only going to be loaded on demand.

123

That means the JavaScript code and the bundling is going to be only loaded when this model is about to be rendered.

124

And the model here is going to be rendered only

125

when we click on the button and when this show model is going to turn to true.

126

So that means this suspense is actually going to go ahead and display as fullback UI in here.

127

We're displaying just like a small loading text in here while code for the model is loading.

128

Once it's loaded, it's going to just like, the model is going to completely replace the loading here.

129

So if you look at it real quickly on the example here, if you click on the open model example, we see loading here while the code is loading.

130

And once it's loaded, we're going to find and actually see, we're going to have our model being rendered for us by React.

131

And when we implement lazy loading, that's what's actually going to enforce code splitting of our components.

132

So for instance in here, because we're lazy loading the model.

133

So if you go and actually see our build directory because you're using Vita in here and actually, you know, Vita is going to generate and build all the JavaScript and React in here.

134

I'm going to just turn it into a JavaScript code in here for the browser.

135

So I'm going to find a couple of assets in here.

136

We're going to find the index, which is the main file in here that has all the code for the whole website and all application.

137

And because we're lazy loading the model in here, it created a separate JavaScript file for it, which means a separate bundle.

138

And it didn't, you know, this is what I mean by code splitting.

139

So you split the code of the model into a completely separate file that could be lazy loaded on demand.

140

And that's going to make your application run faster and gets loaded fast.

141

And if you want to double check if it's lazy loaded or not, you can go to the network tab in here and actually refresh.

142

You're going to find all the JavaScript in here being loaded for you.

143

But if you actually go ahead and clear and try to click on open model, you're going to find the model.jsx only gets loaded when you click on the open model button,

144

which means it's being lazy loaded and have our React code splitting work as charm.

145

Fourth question is, what is the best way to add a global store to a React Outdoor project?

146

And I think the best answer for this kind of question

147

is it depends on exactly what library the team wants to use for of course managing the global state

148

because there are so many libraries it actually depends on exactly the circumstances

149

and what the team wants and what actually works best for the projects

150

and of course the two most used and frequent libraries in here

151

and i'm going to talk about the first one here

152

because that's pretty much used everywhere which is redox

153

and i know a lot of you actually already know Redux

154

and probably like 90% of the time Redux is going to be the answer for most of the questions like that.

155

So Redux is pretty good, it's pretty accurate, it's wild and it's used everywhere and it's easy to integrate and everything.

156

Or the second one

157

which is actually coming really really well like these last days is called Zeus 10

158

which is very integrated to work with React and React hooks

159

and everything and it's super super simple to use and set up in just couple of seconds.

160

So I'm going to start with Redux in here.

161

For Redux, there's actually a Redux toolkit, which is another library that uses Redux behind the scenes, but actually provides optionated sort of setup

162

that allows you to easily set up Redux

163

because Redux is a little harder and actually has some dependencies to install and everything.

164

But using Redux toolkit, it's going to be super easy

165

and straightforward for you to set up and actually use Redux inside of your projects.

166

For instance, in here for our projects in here, we have two implementations.

167

So Redux in here for simply what you need to do is actually create first a slice

168

so of course after installing a redox toolkit

169

and everything you have to install redox toolkit and actually go ahead

170

and create a slice it's sort of like a slice of your global store

171

so you imagine global store has many slices

172

and each slice in here is just like an object

173

that has a lot of properties and function or particularly methods

174

so for example in here i've got theme slice

175

which is has a name has an initial state with the mode light in here whether it could be dark

176

or light theme and it has some reducers in here now reducers are simply methods

177

that actually are going to be called by the react component actually trigger a state change in here

178

which means they change for example the mode in here from light to dark

179

or vice versa so you simply create the styles in here you create another file that's called store

180

and you actually import

181

that reducer of course you do export default theme slice reducer

182

you grab it in here to configure store from the redox.js

183

to kit that's going to actually you create a store for it.

184

And of course, you can add in here as many slices as you want.

185

And once you have got the store, you go ahead and actually import a provider from React Redux, which of course you need to install as well.

186

And you do provider, you provide the store you just created in here, and you provide all your elements that you want to use or have access to that particular store.

187

Like for example, the theme toggler in here.

188

And the theme toggler is actually of course, our component that wants to have access to our global store, which can actually go ahead and use this too

189

which is use selector to actually select a slice of the

190

state for example it's going to have full access to the state

191

and can access the mode from our theme slice

192

or the dispatch in here to actually to dispatch an action

193

of course those actions in here can be imported as well

194

from the theme slice in here the actions you just created as well

195

so you do dispatch toggle theme in here

196

and whenever this change theme in here is going to be called

197

which is called exactly when the input is checked in here like a checkbox

198

when it's checked it's going to change the theme from light to dark or vice versa.

199

And that's what you're going to get in here.

200

For example, dark mode in here, if you click on this, it's going to activate the dark mode in here.

201

If you click on it, it's going to deactivate and back and forth in here.

202

And all the data in here, the whole state is saved on a global store and any component at any time can access that piece of state.

203

Now, if you want to use Zeus 10, that's basically the same thing, but it's actually a lot simpler.

204

So Zeus 10 in here, just install Zeus 10, you import the create function in here, you do create you're going to have a set and get function

205

and this just basically you return an object and inside of

206

that object you put all your properties in here

207

which are going to be of course going to represent the

208

state for example the mode in here could be light

209

or dark and you can of course put all your methods inside the methods actually going to toggle

210

or be able to access

211

and actually change the state for example this toggle thing is actually going to go with the set

212

and it's going to set the mode depending on exactly what is the current one it's kind of like inverse it.

213

And the same thing in here for the Zeus 10 theme toggler, the component here that has access to this, you just do use app store, which is our, you know,

214

hook we created using the create method from Zeus 10.

215

And we just do use app store, we grab the state in here, we grab the mode, and we do toggle theme in here to actually access to the toggle function.

216

And whenever we call it, that's actually going to toggle the theme and actually change that on the Zeus 10 store.

217

And of course, for Zeus 10, you can basically create as many stores as you want.

218

All of them are very lightweight, very independent, and they work perfectly.

219

And of course, as I said, global state management in React is a vast thing with many libraries

220

and many options to choose from and to do with depending on the main goal of your project and your team, and of course, your preference as well.

221

Fifth and the last question in here, let's say for example, he asks you to give me an example of a basic React SSR implementation.

222

So always in the React realm in here, whenever we talk about SSR, the first thing that comes to our head is actually basically the Next.js framework,

223

which is a huge framework used by millions of developers out there

224

that does SSR and it does it perfectly with so many great features.

225

So maybe you want to outline that there is a type of frameworks

226

that already does SSR like Next.js or Remix or something like that.

227

And you outline this like very big frameworks.

228

And of course, you can give him a very simplified version of an SSR React application with like Node.js, Express.js with React.

229

So for example, you have a simple project in here that does show how SSR works.

230

And as I said before, SSR is just like server-side rendering.

231

So it has to involve a server behind the scenes

232

that actually compiles your React code and send it back to the client or the browser to render that particular React code.

233

So in here, to have SSR, you have to set up a simple project that uses Express.js and React.

234

And you basically install a couple of dependencies like Express, React, React DOM.

235

And here I chose to use ASBuild in here to compile our project.

236

Of course, you can use whatever you want.

237

You can use Webpack, Babel, but I think ASBuild is really perfect for that kind of case scenario

238

because actually basically it can compile everything very easy and it has a super easy API to follow and work with.

239

So I would really recommend going with that if you want to implement this in an interview.

240

Next in here, you just simply have a React

241

or a simple Express.js application in here

242

that serves static files from the disk in here

243

and actually uses the up router in here to do up.get to serve our react component

244

and html file in here whenever the server is hit.

245

So here we're saying it on the root of the server, root you run out of the server.

246

We're going to go ahead and read the file

247

which is the index.html which is right over here inside of the public

248

and of course it's just a simple index.html in here

249

that has basically nothing but it has this id in here root

250

which of course we're render our react component

251

that are inside of the src right inside of it

252

so we're going to use the server in here we're going

253

to read the data from the index.html in here going to grab the data

254

and make sure there is no error and last

255

but only is going to render do like response send

256

and here we're going to replace the root element in here with the root element

257

but this is actually the important part in here you have to focus on where you do react dom server

258

which is you import it from react dom for slash server

259

and you call the render to string

260

which is a method provided by the React team in here

261

to be able to render your React components into a string that could be sent back from a server response.

262

So that means render to a string in here.

263

It takes a React component like our application in here.

264

And of course, our op.gsx in here has a simple React component that uses states that renders a simple gsx in here.

265

It uses onclick, pretty much anything where you could do React normal stuff.

266

And you just render that one.

267

And of course, here is going to be converted into a string

268

and it's going to be sent back from the server to the client.

269

So the browser can render our website.

270

And here, of course, you just do listing on port, for example, 3000 or something to start the server.

271

Now, another crucial part in here is actually to make sure you build your server and client in here using ES build, otherwise they won't work and won't compile.

272

So you have to do go ahead and do build client in here.

273

Like I have a script in here.

274

I'm using ES build to build the index.js in here

275

and the server and actually bundle them out inside of the build directory.

276

So later on, I can use this start script in here to basically start our Express JS server.

277

Simply just do yarn build server.

278

That's going to build your server and yarn build client as well.

279

And last but least, you just do yarn start to start a server.

280

It's going to be listed in over 3000.

281

Now if you go to local 3000, you click on it, you're going to get your react application in here that is server side rendered.

282

And of course, it works perfectly.

283

Whenever, for example, we click on the button, the state and the counter changes perfectly.

284

And as a proof to make sure that it's actually really server-side rendered.

285

It's not like a client-side application or something.

286

And to showcase to the interviewer that you basically understand exactly what's happening.

287

You're not just copy-pasting code like chatGPC or something.

288

So you go to the network tab in here and actually head over to the local host, which is of course where, you know, the main HTML gets returned back.

289

So you go to local host in here and make sure, you know, this is the root of your website.

290

You go to preview, there's actually the HTML that's returned back from the server and rendered on the browser.

291

You go to response and you look at the HTML here.

292

That's exactly the HTML you have.

293

So it has the root in here.

294

But if you see in here, that's actually was rendered by React.

295

So this is actually our React component, our component, particularly that was rendered right over here.

296

That means server side rendered.

297

And of course, this was sent back from the server.

298

So that works perfectly.

299

And later on, of course, if you notice in here, we've got a bundle.javascript in here that gets sent back.

300

And this bundle.javascript is actually what makes this particular button in here works where hydration works particularly.

301

It's like you can click on the button and have this JavaScript work.

302

This bundle.js is very crucial.

303

Of course, this bundle.js is actually what gets compiled by using bundle or build client in here, esbuild, and you build the index.js in here.

304

And if you look at the index.js, it has, and it uses a special function

305

and you'd also to make sure you actually know

306

that one is it uses the react dom hydrate

307

and it takes the root node of a react open here

308

or you know the main components

309

that was rendered before on the server you have to provide the one here as well

310

and you provide the node where it was rendered before

311

and have that actually inside of the root node and

312

that will always to hydrate and actually activate the javascript with the rendered html from the server

313

so the JavaScript can work and of course can make your application interactive by, you know, of course you can click on the buttons in here,

314

you can change and you can have everything working as expected with JavaScript.

315

So that was the most frequent React interview questions in here.

316

So thank you guys for watching.

317

Really hope you guys enjoyed.

318

Let me know in the comments if you really like this video.

319

I can do more frequent React or X technology sort of questions for your interviews and stuff.

320

Anyway, guys, see you hopefully in the next ones.

✨ Recommend Video

132 sentences

Video

Daily ConversationUniversity StudentsWorking Adults

182 sentences

🔥HR Interview Questions and Answers (2025) | Top HR Interview Questions for Freshers | Intellipaat

Business EnglishInterview EnglishUniversity Students

200 sentences

Excellent 2 Years AWS DevOps Engineer Mock Interview with Questions and Answers | Cloud | Docker

Business EnglishInterview EnglishUniversity Students

257 sentences

A/B Testing in Data Science Interviews by a Google Data Scientist | DataInterview

Business EnglishInterview EnglishUniversity Students

49 sentences

Next JS Interview Questions and Answers 2026 | Top 20 Most Asked Questions

Interview EnglishUniversity StudentsWorking Adults

171 sentences

Interview Tips from a Senior Software Engineer... and a 4 year old

Business EnglishInterview EnglishUniversity Students

Vocabulary and speaking notes for this lesson

This B2 speaking lesson is built on the video “The React Interview Questions You need to Know”. The speaker keeps coming back to these words: react, component, render, inside, model. This video has 320 sentences and 4753 words to shadow. The speech runs for 21:28. The speaker talks fast, about 221 words per minute, so expect linked and reduced sounds. 84% of the words are among the 3,000 most common in English; the rest is worth studying before you start.

Key vocabulary in this video

The 15 most advanced words in the video, with pronunciation and meaning:

Word	Pronunciation	Meaning
react verb	/ɹiːˈækt/	To act in response.
render verb	/ˈɹɛn.dɚ/	To cause to become.
import noun	/ˈɪm.pɔɹt/	Something brought in from an exterior source, especially for sale or trade.
slice noun	/slaɪs/	That which is thin and broad.
bundle noun	/ˈbʌn.dl̩/	A group of objects held together by wrapping or tying.
paragraph noun	/ˈpæɹəɡɹæf/	A passage in text that starts on a new line, the first line sometimes being indented, and usually marks a change of topic.
node noun	/noʊd/	A knot, knob, protuberance or swelling.
modal adjective	/ˈməʊdəl/	Of, or relating to a mode or modus.
toggle verb	/ˈtɒɡ.əl/	To alternate between two positions using a single switch or lever.
install verb	/ɪnˈstɔl/	To connect, set up or prepare something for use
compile verb	/kəmˈpaɪl/	To make by gathering pieces from various sources.
suspense noun	/səˈspɛns/	The condition of being suspended; cessation for a time.
portal noun	/ˈpɔːɹtl̩/	An entrance, entry point, or means of entry.
depend verb	/dɪˈpɛnd/	To be contingent or conditioned; to have something as a necessary condition
redox adjective	/ˈɹiːdɒks/	Of or relating to any reaction in which oxidation and reduction occur simultaneously.

Phrasal verbs you will hear

Word	Pronunciation	Meaning
go ahead verb	/ˌɡoʊ əˈhɛd/	To proceed with; to begin.
set up verb	/ˌsɛt ˈʌp/	To make ready for use.
cover up verb		To conceal or disguise.
do up verb		To fasten (a piece of clothing, etc.); to tighten (a nut etc.)
pass through verb		To go through, to travel through, to transit or lie across a place or from one place to another.
send back verb		To return (something) to its origin.

Sentences worth repeating

Short, complete lines from the video that you can reuse in everyday conversation:

How can we do that?
We've got a parent component here on the top.
Let's say we want to render a paragraph.

Grammar in this video

The structures the speaker uses most, with the exact words from the video:

Structure	In the video
Passive voice be + past participle — the focus is on what happens, not who does it	is called · be stored · be placed
Relative clauses who / which + clause — extra information about a person or thing	parent, which is · component, which is · here, which is

Pronunciation to watch

The speaker uses 52 contractions and reduced forms, such as we're, we've, you're. Say them the short way, as you hear them.

The “sh” and “zh” sounds: showcase /ˈʃoʊˌkeɪs/, hydration /haɪˈdɹeɪʃən/, refresh /ɹɪˈfɹɛʃ/
Long words — get the stress right: dependency /dɪˈpɛndənsi/, directory /dɪˈɹɛktəɹi/, deactivate /ˌdiːˈæktɪveɪt/, whatsoever /ˌ(h)wʌtsoʊˈɛvɚ/, interactive /ˌɪn.tɚˈæk.tɪv/

How to practise with this video

Listen to the whole video once without speaking and note the words you do not know.
Start at 0.75× speed, shadow it sentence by sentence, then go back to normal speed once it feels easy.
Record yourself and compare with the original, paying attention to words like react, render, import.

What is the Shadowing Technique?

Shadowing is a science-backed language learning technique originally developed for professional interpreter training and popularized by polyglot Dr. Alexander Arguelles. The method is simple but powerful: you listen to native English audio and immediately repeat it out loud — like a shadow following the speaker with just a 1–2 second delay. Unlike passive listening or grammar drills, shadowing forces your brain and mouth muscles to simultaneously process and reproduce real speech patterns. Research shows it significantly improves pronunciation accuracy, intonation, rhythm, connected speech, listening comprehension, and speaking fluency — making it one of the most effective methods for IELTS Speaking preparation and real-world English communication.

Shadowing technique: read the full step-by-step guide →

Shadowing Practice: The React Interview Questions You need to Know - Learn English Speaking with Video

Video

🔥HR Interview Questions and Answers (2025) | Top HR Interview Questions for Freshers | Intellipaat

10 JavaScript Interview Questions You HAVE TO KNOW

System Design Mock Interview: Design WhatsApp

Interviewing Part 1 - What You Need To Ask In Advance

Data Presentation, Step-by-Step | Google Data Analytics Certificate

CI/CD Explained in 5 Minutes

The Essential UX Interview Questions (And How To Answer Them!)

Excellent 2 Years AWS DevOps Engineer Mock Interview with Questions and Answers | Cloud | Docker

A/B Testing in Data Science Interviews by a Google Data Scientist | DataInterview

Next JS Interview Questions and Answers 2026 | Top 20 Most Asked Questions

Interview Tips from a Senior Software Engineer... and a 4 year old

Vocabulary and speaking notes for this lesson

Key vocabulary in this video

Phrasal verbs you will hear

Sentences worth repeating

Grammar in this video

Pronunciation to watch

How to practise with this video

What is the Shadowing Technique?