All interviews are daunting. I know how do you feel searching for every possible interview tips and expected questions. After a few interviews, I got my first dev job, and I want to share what I've learned throughout the journey. I hope it helps.
There are so many types of coding interview, but in this post, I'll only deal with coding assignments in a given time.
You'll be required to build something simple(a UI, basic exercise of the framework/library/language) in a limited time.
Here is a react coding assignment. Let's pretend that this is a real interview assignment. (I got this assignment from this video. He was actually required to do this assignment on three of his interviews.) I attached my code downside, but try writing your own code before seeing it.
Coding assignment
- You're going to build a web app using create-react-app and react-router.
- Using the user data from randomUser API, you will render a list of 10 users. (picture1)
- Each user's name is displayed on the list, and if you click it, it routes you to the corresponding user detail page, which consists of user photo, user name and email address. (picture2)
1. Read it carefully & prioritise it
You should carefully read the instructions. Don't skim. When you're nervous, you're likely to miss the details. Read like you're the proofreader, then prioritise the tasks. Think about what they want to see from you. And double-check the deadline.
(Optional: Exclude the last 5-10min for the rehearsal.)
From our assignment above, interviewers want to see if we can use Fetch API, map, useEffect, and react-router. So these are crucial features.
2. Stick to the basics
If you don't have prior experience as a developer, and you are applying for a junior role, normally the interviewers won't expect you to write a high-level code. Instead, they want to see if you have minimum qualification.
- Make sure to organise your codes well(I use prettier) and to use proper semantic tags (do not overuse
div). - If you're going to copy and paste a line of code from somewhere, make sure you're not using
var. - Don't forget to put alt attribute for images, and unique key for each of the map children.
All those are so fundamental that everyone knows it. But what happens if you miss something that everyone knows on the interview? You don't want to know.
3. Do your rehearsal
In two of my interviews, I was asked to upload my code to a public repository so that the interviewers can pull my repo and check the code. This means there should be no problem while they pull the repo and execute your code.
Imagine you have a presentation. You prepared everything, and everyone is waiting for you to present. But at the last moment, your ppt file cannot be open, or suddenly the projector won't connect. You cannot guarantee that your code will be executed successfully on another machine.
So if you have time left, rather than impress them with additional features or CSS, try to pull your code in another folder and make sure everything goes smoothly.
3. You should be able to explain your code.
The interviewers will go line by line and will ask you questions about your code.
Possible questions will be...
- Why did you use
<div>instead of<button>?- What is
keyin React? Why shouldn't we use{i}as the key?- What is the use of the second argument in useEffect hook? Why did you pass an empty array?
4. DON'T GET DEFENSIVE on code review
I know sometimes it's hard to separate yourself from your code. But no one wants to hire someone who gets defensive on every feedback.
The interviewers will probably point out what you did wrong, what you could have done better. Maintain a receptive attitude and appreciate their feedback. (How many times professional developers would review and comment on your code for free?) They also want to see how would you react to future code reviews.
Lastly, here's my code for this mock assignment.
///App.js
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/Home";
import UserDetail from "./components/UserDetail";
function App() {
return (
<Router>
<div className="App">
<Switch>
<Route path="/profile" exact component={Home} />
<Route path="/profile/:id" exact component={UserDetail} />
</Switch>
</div>
</Router>
);
}
export default App;
///components/Home.js
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
export default function Home() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetchUsers();
}, []);
const fetchUsers = async () => {
const res = await fetch("https://randomuser.me/api/?results=10");
const data = await res.json();
try {
setUsers(data.results);
} catch (err) {
console.log(err);
}
};
return (
<div className="userList">
{users &&
users.map(user => (
<li key={user.login.uuid}>
<Link
to={{
pathname: `/profile/${user.login.uuid}`,
state: { user }, //pass the data so that you can use it via useLocation
}}
>
{user.name.first} {user.name.last}
</Link>
</li>
))}
</div>
);
}
///components/UserDetail.js
import React from "react";
import { useLocation } from "react-router-dom";
//get the corresponding data sent from Link state
export default function UserDetail() {
let params = useLocation();
const { name, location, email, dob, picture } = params.state.user;
return (
<div>
<h2>
{name.first} {name.last}
</h2>
<img src={picture.large} alt={name.first} />
<p>
{dob.age} / {location.country}
</p>
<p>{email}</p>
</div>
);
}
Conclusion
No matter how much you prepare for the interviews, it won't guarantee your triumph every time. Yeah, life sucks. If you ruin one, don't let it get you down.
I also made some stupid mistakes in the interviews. But the good thing about being human is you can learn from your flaw. The failure will let you know what exactly you can improve, and you can start from there.
The job-hunting process is not a sprint; it's a marathon. Don't be disappointed with the rejection and mistakes, and keep applying.
Top comments (9)
In the job hunt now. Thanks for this post Hannah it was well timed! Will check out the Youtube Video.
But the good thing about being human is you can learn from your flaw. The failure will let you know what exactly you can improve, and you can start from there.^ This is a very good point which I have to keep reminding myself. Looking forward to your next post.
Thanks! I received so many rejection emails that I became immune to it in the end. I didn't describe my mistakes in the post because I still didn't recover from the shame. Job hunting is hard, but stay positive. Good luck!
I think a good example of your workflow is better than building an app in front of someone. Having a good portfolio of work can express your skill better than cramming for their test.
I recently created a template project for any future react projects I work on. I like to do this so the projects I work on have a solid consistent base.
github.com/jwhenry3/react-template
This uses create-react-library and NextJS to give a full development experience from building libraries of components to building apps that utilize state management, ui frameworks, and enforcing standards to keep your focus on the business logic.
If you find a setup that works best for you and build upon it, it can either help a company consider you more heavily or it can help you build out their test a bit quicker and cleaner.
I think that's a neat idea. Simple but effective way to measure the persons react knowledge. Should be doable in an hour or so.
I'd like to know more such projects simple & can give some adrenaline rush.
Agreed, one hour sound great(adrenalin rush, I like the expression!). There are so many React tutorials but practical quiz or exercise(compared to JS) are much harder to find. If I find some, I'll post it.
you are such great human, thanks for this article
Great post!
I apologize if I missed it, but how much time did you have for this task? Also, thanks for writing, it was very helpful!
I didn't time it, but I would say more or less one hour.
(Youtube helped me a lot with react router). Thanks!