DEV Community

loading...
Cover image for Top Interview Questions for Frontend Developers(React)

Top Interview Questions for Frontend Developers(React)

Abhishek Raj
Learning something worth sharing....
・Updated on ・3 min read

In the past few days, I appeared for many frontend devs interview. So, in this post, I have compiled some of the most common question I was asked.

Q1. How would you optimise a slow React website?

My View:

  1. We can open the network tab and check if the issue is in frontend or backend.
  2. If the problem is with frontend, we can use a profiler to see where is the issue. I think almost every frontend dev has heard about Lighthouse or GTMatrix. image

So, the issue with these profiler is that they mostly give information about First Paint/ Time to Interative, etc... but suppose there is a table which gets rendered on each state change or a component is taking too long to compute, how'd you find?

Here comes React Profiler for our rescue.
image

We can see which component took how much time to render, then further we can memoize the component/functions taking forever to render.

Read More

Q2. How would you design a loosely coupled React App?

image

My Views:

  1. Don’t repeat yourself: Whenever you see you have repeated a piece of code, try to create another component/function and break it into small pieces.
  2. Try to move API calls on the top components.
  3. Try to reduce number of props being passed.
  4. Try to use Higher Order Components whenever possible.
  5. Divide features in dedicated reducers.
  6. Last but not least, Use side-effects manager like Redux-Saga to handle side effects.

The more loosely coupled your application is, more scalable it will be.

Q3. When to use Redux Thunk & Redux Saga?

image

Note: Redux Thunk is only 10 lines of code including function name & curly braces (~300 bytes) πŸ₯Ί
Redux-Saga is around 13kb πŸ™‚

My View: If you are creating some small scale website then Redux Thunk is you child. Redux Saga is like having an extra thread in your web app which can easily handle any side effect, all thanks to generator functions.
Read More

Q4. Two Way Data Binding in React?

My View: React has one way data binding, which means, data flow is from owner to child only, the child can't update the data directly. It will need to dispatch some actions/call the function required to update the data.

image

But in some cases two way data binding might be required.
So, how'd you apply 2 way data binding, React provides some function to do that too.
Read More

Q5. Synthetic Events in React

My View: Many of us have used Synthetic Events in React but very few of us knows about it. 😝
Quoting React Docs here

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Read More

All the given answers are my own views, if you think I might be wrong, do comment it down below. I am open for discussions. πŸ˜ƒ

Connect Me @ Linkedin, Github, Twitter, Youtube πŸ˜‡

Discussion (35)

Collapse
ortonomy profile image
πŸ…–πŸ…‘πŸ…”πŸ…–πŸ…žπŸ…‘πŸ…¨ πŸ…žπŸ…‘πŸ…£πŸ…žπŸ…

Odd interview questions - if I wanted to know how much a developer knew about React I’d be asking more about:

When do you deploy state vs. refs?
What are some gotchas of useEffect?
Under what conditions should you optimise using memo / callback?

For data only components, it’s much more effective these days to export logic out to a hook or render props - there are serious flaws with HoCs…

Collapse
sa_webb profile image
Austin Webb

Is there by chance anyway you could provide a brief answer to β€œwhat conditions should you optimize memo / callback?”

I’m a β€œjunior” dev and would like to understand this. The reason why I’m asking is because everything I’ve read online regarding this topic has been more theory than application.

I would greatly appreciate any input that you have to give. Cheers

Collapse
ortonomy profile image
πŸ…–πŸ…‘πŸ…”πŸ…–πŸ…žπŸ…‘πŸ…¨ πŸ…žπŸ…‘πŸ…£πŸ…žπŸ…

Sure, I'll write an article on it and link back here.

Collapse
abhishekraj272 profile image
Abhishek Raj Author

Yes those questions can be asked if you are interviewing for intern/junior dev position.
If you are interviewing for senior dev position, more design/optimization questions are asked.

Collapse
ortonomy profile image
πŸ…–πŸ…‘πŸ…”πŸ…–πŸ…žπŸ…‘πŸ…¨ πŸ…žπŸ…‘πŸ…£πŸ…žπŸ… • Edited

Depending on the answers to my questions, I know: the above would really show an understanding of how react works and therefore an ability to:

  • know how react decides to re-render (e.g. referential equality)
  • know when & why to use imperative escape hatches over the declarative nature of react
  • know when & why to optimize performance

Subjects I would not really expect a junior/intern to know much about.

Thread Thread
abhishekraj272 profile image
Abhishek Raj Author

Its all about what are requirements of developers in which country.
In my country, even interns are required to know

  1. When to use useState/useRef?
  2. How to use useEffect?
  3. When/How to optimise using memo/callback?
Collapse
ortonomy profile image
πŸ…–πŸ…‘πŸ…”πŸ…–πŸ…žπŸ…‘πŸ…¨ πŸ…žπŸ…‘πŸ…£πŸ…žπŸ…

Not really. Nothing you’ve listed is really β€˜senior’

Thread Thread
abhishekraj272 profile image
Abhishek Raj Author

Yes I have only mentioned common react questions, not HLD or LLD questions.

Collapse
lukeshiru profile image
LUKESHIRU

For Q4, personally if I get asked about "two-way data binding" in React, I would see that as a "red flag" (it smells like bad architecture), so I might just answer:

If I find a two-way data binding in React, from my point of view, the first priority is to re-implement that flow so it behaves as a one-way data flow instead.

I would have a similar answer if they asked about how to deal with mutations in a React codebase when the idea is to avoid them.

Cheers! :D

Collapse
abhishekraj272 profile image
Abhishek Raj Author

Yes, you are absolutely right, just run away from two way data binding as fast as you can but sometimes it is necessary to use. So, knowing it might be important.

πŸ˜…

Collapse
zannisdf profile image
Giorgio Zanni

IMO getting this kind of questions in an interview for a senior position is a big red flag.

The challenges of building a good frontend go way past the domain of a single library (!) - software architecture, scalability, resilience, testability, asset optimization, separation of concerns, etc. In other words, the fact that you're a react expert doesn't tell anything about your seniority.

Collapse
mycarrysun profile image
Mike Harrison

Came here to say this - senior should be able to design systems inside or outside of react and these are pretty beginner questions

Collapse
abhishekraj272 profile image
Abhishek Raj Author

There were multiple rounds after that, this was the 1st one. I have not written about HLD, LLD here

Will make a post in soon.

Collapse
imalov profile image
Ivan Malov • Edited

Questions like redux vs saga, react vs vue, two way data binding has doesn't make much sense. It seems to me that such questions are asked to specifically fail the candidate or amuse the recruiter's ego. Senior is not about knowledge, but about responsibility and the ability to make decisions. Developer can have not so much experience in Saga, that doesn't make his a bad developer or less "seniory".

If you want to check knowledge and quality, take a look at the code.
If you want to check problem-solving, suggest solving the problem.

Collapse
abhishekraj272 profile image
Abhishek Raj Author
  1. Its Thunk vs Saga not Redux vs Saga and Thunk vs Saga is all about Async/Await and Generator Functions.

  2. No one asked me React vs Vue

  3. This was 1st round there were code review + DSA + HLD + LLD rounds as well

Collapse
imalov profile image
Ivan Malov

But this also has doesn't make much sense, as for me. Sorry for repeating, but It seems to me that such questions are asked to specifically fail the candidate or amuse the recruiter’s ego. To confirm this, it is enough to ask a couple of uncomfortable counter questions to the recruiter and you will be surprised how he will fall down.

Again, senior is not about knowledge, he is not a wiki. Senior is about responsibility and the ability to make decisions. And he must also foresee the future a little and set priorities. Where to lay the extensibility, and where not, for example.

Thread Thread
abhishekraj272 profile image
Abhishek Raj Author

Yes, I agree with you.
I would also like to see some counter questions. Could you please throw some light on it.

Thread Thread
imalov profile image
Ivan Malov • Edited

Do you mean counter-question to Recruiter? It depends on the situation and your knowledge. There is always something to ask that a person does not know. Once I was asked a lot about Redux. I didn't have much experience with Redux, but I knew something. I thought that the person was really experienced in this matter and asked him about how Redux solves the Diamond Problem. He couldn't say anything about it.

A good technical interview is a dialog between two professionals. You discuss technical topics and understand whether you are suitable for each other or not.

This is my opinion. I understand that there are people for whom this kind of interview, like an exam, is considered normal. But I do not know anyone personally who would be happy to be in the place of the interviewee.

Collapse
mfp22 profile image
Mike Pearson

This is completely irrelevant to the majority of front end development jobs

Collapse
abhishekraj272 profile image
Abhishek Raj Author

React is used nby majority of companies now, thats why more companies are asking React specific question. It might vary from company to country.

Collapse
mfp22 profile image
Mike Pearson • Edited

It is the most popular framework for sure, but is it more popular than Angular, Vue, Svelte and others and companies that are hiring front end developers that aren't using a framework at all, combined? Even if React was 80%+ of the entire front end industry, it would be more appropriate to label these as React questions instead of general front end questions.

Thread Thread
abhishekraj272 profile image
Abhishek Raj Author

Last time I checked React was more used than any others.
Lets not make it React vs Angular and discuss its pros & cons. Every framework has that.

Changed the title from frontend to react.

Collapse
xavortm profile image
Alex Dimitrov

Oh, you meant React developers

Collapse
abhishekraj272 profile image
Abhishek Raj Author

Last time I read React was considered Frontend πŸ™‚

Collapse
xavortm profile image
Alex Dimitrov

So is vue, Angular, VanillaJS, HTML, CSS, SVG, but they were not covered; The (React) in the end, πŸ‘ this works ^^

Collapse
deepanshu44 profile image
deepanshu44 • Edited

Does class components and their lifecycle methods hold any importance presently?
Should I study them for interview or functional components and hooks are enough?

Collapse
abhishekraj272 profile image
Abhishek Raj Author

You should know class components & all lifecycle methods and their alternative in hooks, functional components + hooks are important as well.

Reason: My codebases or some part of codebases are still written using class. So, companies sometime ask those question too. Be ready for any question, you don't know what companies are using under the hood.

Cheers :)

Collapse
deepanshu44 profile image
deepanshu44

thanks

Collapse
ortonomy profile image
πŸ…–πŸ…‘πŸ…”πŸ…–πŸ…žπŸ…‘πŸ…¨ πŸ…žπŸ…‘πŸ…£πŸ…žπŸ…

You should know class-based components - but I would pretty much avoid using them in almost all cases for new code. The only time I know of to use them is without a choice - when you need to implement an Error boundary - the react docs still specify the API as a class component.

Collapse
anupamdubey8823 profile image
Anupam Dubey

If the website you are making is not very complex in nature(as in the number of States you have to handle), then using Redux in such cases is not recommended. It is even mentioned on the official Redux documentation page.

Collapse
ortonomy profile image
πŸ…–πŸ…‘πŸ…”πŸ…–πŸ…žπŸ…‘πŸ…¨ πŸ…žπŸ…‘πŸ…£πŸ…žπŸ…

Why did you link to a deprecated react API? (For two-way data binding).

Collapse
abhishekraj272 profile image
Abhishek Raj Author

That doc link also has recommended way to do that.

Collapse
capscode profile image
capscode

jsut WoW.
1st once is amazing.
thanks

Collapse
abhishekraj272 profile image
Abhishek Raj Author

Thanks for the response Rahul,
I hope you will also like my future posts πŸ˜ƒ