React Hooks with Functional Components

and my experience doing a React Technical Interview with Skilled

I recently graduated from a coding boot camp and had the pleasure of doing a mock technical interview with Skilled. My interview was done in React.

Interviewer and Interviewee sitting at a desk

I think Skilled can be a very useful tool for developers who would like extra practice with technical interviews. They also provide other services such as resume review. The coaches that act as the interviewer are professionals who have many years of experience working in the tech industry. They have experience with hiring developers and managing teams, so they are able to provide really useful insight related to interviews. The interviews are one hour long and done remotely, so there are many time slots allotted and can be flexible.

I want to briefly share some of the topics that were covered during the interview before diving into the actual coding part and React Hooks.

The questions asked were all on the fundamentals of React. Here are some examples:

• What is the Virtual DOM?
• What are the different types of components in React? When do you use which?
• What are React lifecycle methods?
• What is state vs. props?
• What is a tool you can use to debug in React?
• What is React Hooks?

There were 8 questions in total, and I thought the questions were pretty basic, things that anyone learning/using React would know. I did get stumped when the coach asked about Hooks, as this is something I did not learn during my time in boot camp. My coach was nice enough to go over the basics of using Hooks at the end of the interview, which I will cover more later in this blog.

Since I didn’t know anything about React Hooks and didn’t have much practice using functional components, the coach was fine with me using a class component for the coding challenge part. He first wanted me to build a skeleton of a class component, including the import of React and exporting the component.

Class Component Skeleton

He also asked me about fragments, which I had not used before, and explained to me that I should use fragments whenever I can so that I don’t have unnecessary div tags in my code.

The next thing he asked me was to use the constructor method to set the initial state of a property called helloTranslations as an empty array.

Using the constructor method and setting state

We had previously discussed the major difference between the use of a class component vs. a functional component, with that being the use of the lifecycle method. He wanted me to use componentDidMount to fetch pseudo-data and to assign that data to our helloTranslations property.

Using componentDidMount to fetch data

The database, helloTranslationsEndPoint, is basically the translations of the word “hello” in different languages. I used this.setState to assign the fetch data to our existing state. Also, he wanted me to filter out the English version of it, so I used .filter to make that happen.

Then, the last two things he wanted me to do was to render a list of buttons, which each containing a translation of the word “hello”, and when clicked, console.logs the translation.

Using onclick and rendering translations

I used .map to map through the list of translations so that each translation could be rendered on a list, using the “li” tag. Each translation would be on a button, and the onclick event would call on the handleClick method to console.log the specific translation.

That was it for the coding part of the interview!

Then came the fun part where the coach explained how to convert the class component I built into a functional component using Hooks.

React Hooks

He started out by explaining that since the lifecycle method cannot be used within a functional component, Hooks allows for that to happen with useState and useEffect. useState enables the initial state to be set and useEffect is a method used to set state.

Skeleton of a functional component and using useState to declare state variable

A functional component is written out as you would write a function, using const and the arrow function. helloTranslationsEndPoint is the pseudo-URL we used before, being passed down as a parameter. In order to use useState and useEffect, they have to be imported from react. The useState replaces the this.state used in a class component. It declares a new state variable, which we called helloTranslations. The setHelloTranslations part will come in handy when the need for useEffect arises.

useEffect is used here to make a fetch request to our database and then to set state as the fetched data. It replaces the componentDidUpdate function of my code when I used a class component. If you are wondering what that empty array is on the last line of code in the snippet above, it is something called a dependency array. We didn’t get into much detail about it, but here is another medium article that explains it in length.

The last part was to render the translations as a list of buttons, and to console.log the translation when a button is clicked.

Rendering the list of translations and creating a function that console.logs the translation when button is clicked

Different from the handleClick method in the class component, you have to write the method out as a function using const. Rendering the data looks very similar as it did in the class component version, with the only major difference being that this and this.state is no longer needed for variables and functions to be used.

Overall, I learned so much from the mock technical interview and can say for sure that it was a positive experience. I was so excited to learn about Hooks that I built an e-commerce app using only functional components and Hooks as soon as I finished the interview.

Thanks for reading my blog, and until next time!