React has very quickly become one of the most popular JavaScript frameworks during the past several years used by small firms and giant firms alike.
And that means that the demand is growing and the supply isn't quite all there just yet. So if you've been spending your days learning React and are now ready to hit the interview scene looking for your next job, here are a few things to keep in mind in order to increase your chances of landing it.
5. Learn the latest React x.x
One of the biggest mistakes that React developers make is that they don't typically keep up with the changes in newer React releases. Meaning that if you are a pro at React 2.1, but haven't kept up, then you might be a terrible React 18 developer.
And you'll never be able to tell just what the companies that you are applying for are using. They potentially could be on React 2.1, if they themselves haven't kept up, but in all likelihood they are pushing something near the middle.
Typically changes to the React framework are very incremental in nature. If you are going from version 16 to version 17 for example, then odds are there aren't too many drastic updates that need to be accounted for. Which is why it's important to stay on top of these changes.
So how do you go about keeping up? Well, there's a couple of ways.
First off, but maybe not as helpful overall, is to check out the changelog for the current version release. You will get a very well broken down list of bug fixes, updates and feature adds it might be a bit too much information to keep track of.
Having an obscure bug from version 14.3 finally fixed, might not be the most relevant information to you.
Much more helpful though is the official React blog, in which they publish upgrade guides when new builds are released breaking down the most notable changes.
In these guides you can typically find new features, methods, properties being added to the framework and also (maybe more importantly), things that have been deprecated and going forward should not be used.
Again, you don't have to know every single nuance of the framework or its changes, but staying up to date in general will help you answer more questions during an interview than you otherwise would have.
4. Master state management
There are various ways that React handles setting and getting state, and it is in your benefit to know all of them, even if you only really use one.
The most important aspect of this pretty much being the ability to set a state variable using useState and the ability to track changes on these variables using the useEffect hook.
let [firstName, setFirstName] = useState('');
useEffect(() => {
// do something
}, [firstName});
The second most important aspect being effectively using props to pass data from one component to another.
let [state1, setState1] = useState('');
function prop1({setState1}){
setState1('abc');
}
function prop2({state1}){
// access to state1
}
These are 2 common scenarios, though by no means the only scenarios.
State management can vary from project to project and from company to company, so being as familiar and comfortable with the many different ways to implement is important.
3. Master event handling
We're all familiar with the usual JavaScript event binding model:
<span onclick="func1()"></span>
And while that "might" still be applicable in a React application, they won't cut it for an interview. And that's because React has subtle nuances when it comes to event binding. The first being the syntax itself:
<span onClick={func1}></span>
And the second being the way that callback functions are added to React. Specifying the function name itself with nothing else is essentially shorthand for the more drawn out version of:
<span onClick={() => func1()}></span>
And lastly, because events on average tend to update state in some regard, being able to create the proper state management workflows using useEffect and useState is crucial as well.
More than anything, the syntax seems to throw alot of younger developers off when it comes to React event binding, so getting as much repetition as possible here is huge important.
2. Implementing API's
In a world of single page applications with asynchronous data loading, API's are at the top of the food chain when it comes to importance in a web development project. And while absorbing API's isn't really a React specific thing, it's still a vital part of developing an SPA.
So knowing how to do it on the fly, in a variety of ways, will be important.
One of the options (and quite possible the easiest to implement) is using a library like Axios to handle the work for you.
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
There are many other libraries as well besides axios that achieve the same result though. Because at the end of the day, you're pretty much just specifying a functional endpoint URL and (hopefully) getting some form of a JSON response back.
And you always have the option of using the built-in fetch method that comes standard with JavaScript.
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
Whichever method you choose to go with is okay, as long as you are able to retrieve data back and display it back out to the client.
1. Learn the hooks
React has hooks. And if you aren't familiar with them, then now is the time. And that's because there's quite a few of them and they each do pretty much completely different things with their own unique syntax.
So here's the list of the most relevant React hooks for your reviewing pleasure.
useEffect - The useEffect hook allows you to track changes on state variables in order to provide some kind of effect after those changes. But it also gives you the ability to run some code whenever the current page is re-rendered for any reason.
useState - The useState hook allows you to create state variables that belong to the current functional component. These variables are automatically tracked by React for changes, which then also automatically re-render on the front-facing client side.
useRef - The useRef hook allows you to store data between renders, meaning that you can access data that does not cause a re-render onto the page. It's idea for accessing DOM elements directly in order to retrieve their values.
useContext - The useContext hook is used to manage globally and not just on a component (like useState). It's idea if you find yourself in scenarios where you need to pass data from parent to deeply nested child through props (also known as prop drilling).
And there are more hooks to discover and use, but these are the ones that every React developer should know like the back of their hand.
Conclusion
And there's alot more that you should brush up on as well before your next React interview. But these are fundamental I feel, and where many developers fall short.
If you perfect the basics, you are pretty much set in terms of answering the more difficult questions. Because at the end of the day, even the most complex system is comprised of if-else, function, let and var elements. They're just put together in an orderly fashion.