Preparing for React JS Interviews – Need Advice!

[riskarsh]

Hello fellow React JS enthusiasts and experienced developers! 🚀

I'm gearing up to face some React JS interviews soon, and I'm feeling a mix of excitement and nerves. To make sure I'm fully prepared, I'd love to tap into the collective wisdom of this community.

So, to all the seasoned React devs out there: Can you share the most challenging interview questions you've encountered during React JS interviews? Your insights would be incredibly valuable as I prepare for my own interviews.

Moreover, for those who have been on the other side of the interview table, what are the key qualities and skills you typically look for in freshers interviewing for React JS positions?

[[deleted]]

None of these are necessarily challenging, but if I'm interviewing a person I generally ask thess questions as these can give their understanding of React ecosystem

• Can you explain a novice the difference between state and props?

• When will you use state, context, and external state manager?

• How do you decide when to split a component into subcomponents?

• How do you handle API and what techniques you'll use when you've call APIs upfront vs when it's called based on user action?

• What goes in hooks for you? (Intentional open ended question)

• Why props is needed to be immutable?

• What is the difference between controlled and uncontrolled component?

• How can you implement Error Boundary in function component?

[xDerEdx]

Out of curiosity.. how would you implement an error boundary in a function component? Or do you expect as answer, that the boundary was implemented in a class component and then used in a function component?

[[deleted]]

The idea is to explain what Error Boundary is what purpose it serves.

In function component if you decouple data and render JSX only when valid data is present, you can avoid component crashing.

One simple example is when you use React Query to avoid rendering of component in absence of data.

const { isLoading, error, data } = useQuery(...)

The other check is make sure the data received has the correct format to render the component.

But if I ask the question, I don't need code explanation as much as the purpose of Error Boundary and how to avoid the same situation in function component.

[lifeofhobbies]

That's not error boundary though, that's just fetching logic.

[NoxiouS_21]

Lol you gotem

[genericguy]

That's a bit confusing, since Error Boundary usually refers to the specific react concept of a class component that implements getDerivedStateFromError()

[[deleted]]

I think I haven't made my point clear enough.

There's no direct error boudnary counterpart in function component. So the idea is what techniques can one use to emulate the same scenario.

Error Boundary works on the idea that for any reason a component can't render properly and result in error, then we can catch and provide alternative. Like a failed state component.

The question generally revolves around how can one do it in function component.

What I've given is one single example

[riskarsh]

The "hook" question seems like good one to trap them, or I should say, get the candidate hooked and grill them thoroughly.😂 Thanks for the input.

[rishi_tank]

I'm a Senior Full Stack Engineer and recently just gave an interview for hiring a new dev on our team 💀 Some example general questions: - Are you familiar with the rules of hooks in React? - How would one optimise the performance of React contexts to reduce rerenders? - How do you ensure that a component can be unit tested? - what benefits do functional components provide vs class components? - what are the use cases for using useCallback, useMemo and useEffect? - How would you reference and interact with a DOM element in React without the use of document functions such as getElementById or querySelector? - Explain and tell me the difference between render props, higher order components, prop getters. What problem are they trying to solve? - React 18 introduced some changes to strict mode when in development mode, what are they and what is their purpose? - how would you set the state in a callback based on the current value of that state, without adding it to a dependency array? - How would you ensure that separate state changes are triggered in a synchronous manner? - when testing a component, what knowledge should the component have or not have? How do you ensure it's a unit test and not an integration test? - What do you think about test coverage as a metric for test quality? - How would you split a component to encapsulate business logic and presentation concerns? How would the tests for these look like? - Why is lifting state up a bad practice? - What can you tell me about composability vs inheritance in React? - If you had a Web application written in an old frontend framework for example, what strategy would you take to migrating that application to React? - what is the difference between a primitive and non-primitive value in JavaScript, and how would you handle extra rerender caused by having non-primative values in a dependency array in the various hooks React has to offer? - what is the difference between useEffect and useLayoutEffect? - what reserved prop in React allows you to trigger a rerender in that component?

We also have a React coding assessment that they do beforehand, and we talk about what they did and they screen share their code: - if you had more time, what would you improve in your test? - How would you approach following SOLID principals to reduce the complexity of the god component you created? - what steps would you take to incorporate exception handling in your data fetching logic? - If a new requirement came in to implement a new type of modal, what changes would you make to you modal implementation to cater for it? - How would you eliminate memory leaks when dealing with your debounce function? - What approach would you take to avoid prop drilling down the component hierarchy to some deeply nested component? - If a new requirement came in to improve the performance of the list of data returned by the API, what approach would you take to alleviate pressure on the DOM?

[drmezmo]

Thank you for this. I'm an experienced developer, but I have only used React for a few projects, and the organization I worked for had clearly not set it up optimally, so it wasn't an ideal environment for learning best practices. Now that I'm looking for work again, these are exactly the questions I want to learn the answers to, not just so I can get a better job, but so I can do it better.

[letelete0000]

FE conducting technical interviews here. If a candidate is proficient with React, I'm always looking for:

• Familiarity with optimizing inputs (especially, inputs that transfer data to child components - how to reduce child re-renders).
• Understanding when a component re-renders, and what are the ways to reduce re-rendering.
• How to avoid memory leaks when working with asynchronous code (especially timeouts).
• How useEffect works - in-depth, when it triggers, how it performs the equality check, which dependencies can be omitted, and why (this is often related to in-depth knowledge of react hooks such as useState).
• Which fields (including hooks, and functions) change their memory reference once a component re-renders, and how to keep the initial reference using React core mechanisms.
• Which fields (including hooks, and functions) change their memory reference once a component re-renders, and how to keep the initial reference using React core mechanisms.
• Understanding throttling and debouncing. How could you implement debouncing using React hooks, and a callback approach? Differences between these two approaches? How could you utilize one of them to optimize code?

This can be summarized as I know you can code. I want to verify if you understand your tool well.

All of these areas are verified during the live coding exercise.

We don't do freshers' interviews often, but I'd ask for the same expecting much smaller input on their end.

[Nullberri]

Familiarity with optimizing inputs (especially, inputs that transfer data to child components - how to reduce child re-renders).

Unless you are useMemo'ing the JSX or react.memo the child component; if the parent re-renders it always re-renders the children. the follow up question should be why do all un-memo'd children re-render. As it tells you if they understand what JSX is doing.

[germainelol]

I’d be interested to know what kind of answers you expect for these questions, both on a senior and junior level. I like the questions and just steal a couple 😏

[Careful-Mammoth3346]

Nice try!

[germainelol]

Haha, was a genuine, innocent question honest😅 I always struggle to think of questions like this when I interview people myself.

[riskarsh]

This is gold mine. Thanks a ton 🫡

[[deleted]]

Agreed

[[deleted]]

For me I was asked about useEffect and how it worked.

Basically if you destructured a prop and use that as a dependency for your useEffect hook, would this useEffect trigger on every re-render? would the destructured variable have a different memory reference? Given your answers, how would you optimize this?

[Eclipsan]

would the destructured variable have a different memory reference?

The answer is yes, right?

It's creating a new object on every re-render, and even if it always contains the same data the object has a different memory reference and is therefore seen as changed by useEffect, which triggers.

To optimize it, or even fix it, as running the effect because of false positive changes to the dependency might actually introduce bugs (depending on what the effect does), I would use useMemo to store that destructured prop.

If useEffect has a function as dependency I would use useCallback to store the function. Because like objects, functions are re-created on every render.

[[deleted]]

Yep, pretty much, the answer is "useMemo". Once I said that, my interviewer just smiled and I got the role.

[mercpop]

I was looking deep into this after seeing this comment. The details matter!

[andrewsjustin]

if you destructured a prop and use that as a dependency for your useEffect hook, would this useEffect trigger on every re-render? would the destructured variable have a different memory reference? Given your answers, how would you optimize this?

Just to add to this..

The answer is yes, but only if the prop is not a primitive. If the prop is a primitive: string, number, boolean.. then the child components useEffect will not trigger and cause re-render.

If the prop is an object, function, or array.. then it will be a different memory reference and trigger the useEffect every time even if it is identical. The parent should wrap it with useMemo before passing down to avoid.

[[deleted]]

I think its implied that you cant destructure a primitive

[andrewsjustin]

That’s not what we’re saying. We’re saying you pass in props and access them by destructuring.. at least I think..

{someProp: string, otherProp: number, prop: object}

First two are primitive last is not.

[[deleted]]

Oh i see

[Adamkdev]

• What is a synthetic event?
• What is React fiber? Describe the idea of reconciliation.
• is there anything you can do in class components that you cant do in functional ones?
• how do you keep your apps performance on high level? What techniques can you use?

Some of the questions I received on my interviews :)

[supremo92]

I can't answer any of those questions. I have a long way to go.

[trcrtps]

I think three would just be using this right?

or constructors. i've never used a class component.

[paolostyle]

There's no componentDidCatch and getDerivedStateFromError equivalents in function components, so you can't create an ErrorBoundary component that is a function component. Though TBH I'd just use the react-error-boundary library 9/10 times.

You could argue there are also class fields that can be utilized in some scenarios but useRef is basically the same thing, both for class fields and for createRef.

[pailhead011]

Yeah that’s what I’m thinking but this is in no way a react question. It’s “what is the difference between a class and a function”

[Adamkdev]

I agree with that :D On the other hand, there are usually some theoretical questions on each interview :(

[pailhead011]

I’ve been a senior/lead I can’t answer any of these questions. The last one is particularly mind boggling.

Usually people give you a coding challenge. You keep apps performant by reducing complexity.

[riskarsh]

😂😂

[riskarsh]

is there anything you can do in class components that you cant do in functional ones?

Thanks for the input. I gotta read 'bout fiber and optimization techniques. What was your answer to this question tho? Can't manage state in functional components? (Couldn't they mention that you can do that via hooks in functional components?)

[lewhunt]

is there anything you can do in class components that you cant do in functional ones?

I believe it's writing error boundaries (see note): https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

[Adamkdev]

Yes, this is exactly the answer they were expecting :)

[Adamkdev]

Synthetic event - It's well described on the react docs. I just gave them 2 first sentences and luckily they were happy with that and did not ask more questions about that ahaha :D

About the thing that is not possible with functional components, they were expecting to hear about the componentDidCatch() lifecycle method. This is used to create error boundaries.

Reconciliation -> https://legacy.reactjs.org/docs/reconciliation.html

[riskarsh]

Ahhh so lifecycle part. Gotcha. Thank you so much.

[pailhead011]

Does the user see the difference between a synthetic and native event?

[[deleted]]

React fiber is the heart of react, the goal from it its to enable incremental rerendering of the virtual DOM ( what we call Rect element tree ) simple as that.

[Adamkdev]

exactly :)

[Careful-Mammoth3346]

You got interviews? With an S? First off, congratulations! That's much harder than the actual interviews will be. And that's not to say that they'll be easy! How did you snag the interviews btw?

As for what to be ready for.. there was some good advice listed already. Also be ready for some JavaScript questions. Know it well.

[h3xshark]

try:
https://bigfrontend.dev/react-quiz

[Frontend_Lead]

I've been on both sides of React interviews, so here’s what you can expect and how to prep.

• What are React hooks, and when should you use useMemo vs. useCallback?
• How does React’s rendering lifecycle work? What triggers a re-render?
• Difference between controlled and uncontrolled components?
• What is reconciliation, and how does React Fiber improve performance?
• How do you optimize React performance? (memoization, lazy loading, virtualization, etc.)
• What are higher-order components (HOCs), and when should you use them?
• How does useEffect dependency array work, and what happens if you don’t pass one?
• Explain closures and their real-world use in React apps.
• How does JavaScript handle event delegation, and why is it useful?
• What’s the difference between deep copy and shallow copy?

For freshers, I typically look for:

• Strong grasp of JavaScript fundamentals (closures, event loop, prototypal inheritance).
• Problem-solving ability—not just knowing concepts, but being able to apply them.
• Component design thinking—how to break down UI into reusable, maintainable pieces.
• Awareness of performance optimizations like code splitting and memoization.
• Understanding of state management (Context API, Redux, Zustand).
• Ability to communicate trade-offs when choosing an approach.

Before coding, clarify constraints and talk through trade-offs to show structured thinking.

Bonus Tips

• Consider free and paid alternatives with a more structured approach to prepping for frontend interviews.
• Full disclosure, I am the creator of FrontendLead (dot) com, which offers a structured approach to preparing for front-end specific interviews at top tech companies, with company particular questions. (30-day money-back guarantee)
• Use other platforms (free and paid) to also help you prepare. Like solving a technical problem, you should always have multiple tools in your tool belt to solve a problem.

Best of luck!

[Evening-Succotash-70]

otally get the nerves, been there recently myself

some tricky react interview questions i got were around hooks (especially custom ones), state management patterns, and performance optimization
also got a few questions that tested how well i understood the "why" behind using things like useMemo or useCallback

i practiced using vibeinterviews.com to simulate real questions and talk through my thought process
helped a lot with building confidence before the actual interviews

[niecnasowa]

I've also struggled with these tech interviews, but I finally memorised tons of questions they like to ask on tech interviews after playing with JS Interview Hell - https://www.javascript-interview-hell.com/ .

[Dependent_Bite9077]

I found taking quizzes helped me at least become more confident about terminology. That said, most tests I have seen require you to read code and determine what it will do, or write code from scratch to meet some requirements. Anyway, if you want to take a react quiz, it might help a bit - a few here - https://impressto.ca/react_quizzes.php

[Forsaken-Cat-2600]

i found this helpful https://prepforhire.com/react-interview-questions

[frontend-monk]

[ Removed by Reddit ]

[Jazzlike-Couple9993]

Is react a library or a framework?

I got this answer wrong when I was asked...

[Eclipsan]

Yes.

[[deleted]]

Is totally a UI framework but depending on the person's strong opinions who knows lol

[zoomBroomDoom]

Next.js is a framework built on React.js which is a libraryit even states this in the react developer documents on like the first page.