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:
- We can open the network tab and check if the issue is in frontend or backend.
- 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.
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.
We can see which component took how much time to render, then further we can memoize the component/functions taking forever to render.
Q2. How would you design a loosely coupled React App?
My Views:
- 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.
- Try to move API calls on the top components.
- Try to reduce number of props being passed.
- Try to use Higher Order Components whenever possible.
- Divide features in dedicated reducers.
- 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?
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.
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.
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. π
Top comments (34)
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β¦
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
Sure, I'll write an article on it and link back here.
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.
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:
Subjects I would not really expect a junior/intern to know much about.
Its all about what are requirements of developers in which country.
In my country, even interns are required to know
Not really. Nothing youβve listed is really βseniorβ
Yes I have only mentioned common react questions, not HLD or LLD questions.
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.
Its Thunk vs Saga not Redux vs Saga and Thunk vs Saga is all about Async/Await and Generator Functions.
No one asked me React vs Vue
This was 1st round there were code review + DSA + HLD + LLD rounds as well
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.
Yes, I agree with you.
I would also like to see some counter questions. Could you please throw some light on it.
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.
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.
Came here to say this - senior should be able to design systems inside or outside of react and these are pretty beginner questions
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.
This is completely irrelevant to the majority of front end development jobs
React is used nby majority of companies now, thats why more companies are asking React specific question. It might vary from company to country.
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.
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.
Oh, you meant React developers
Last time I read React was considered Frontend π
So is vue, Angular, VanillaJS, HTML, CSS, SVG, but they were not covered; The (React) in the end, π this works ^^
Does class components and their lifecycle methods hold any importance presently?
Should I study them for interview or functional components and hooks are enough?
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 :)
thanks
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.
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.
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.
π
Why did you link to a deprecated react API? (For two-way data binding).
That doc link also has recommended way to do that.
jsut WoW.
1st once is amazing.
thanks
Thanks for the response Rahul,
I hope you will also like my future posts π