Search justacoding.blog. [Enter] to search. Click anywhere to close.

23 Entry Level React Interview Questions

Here’s a selection of 23 entry level React interview questions.

When preparing for any interview, it’s clearly important to have a good grasp on the fundamentals of the topic at hand. This selection of questions touches upon many of the fundamental aspects of React, from JSX to the virtual DOM to hooks.

Difficulty wise, I’d consider these questions to be appropriate for junior level developers or perhaps those who are looking for their first React-based role.

So with this in mind, let’s go through the questions and answers!

The entry level React interview questions

In no particular order with regards to complexity.

1. What are props and what purpose do they serve?

Props, or properties, are simply arguments passed in to a React component. We can use props to pass data between components.

Bonus points for: referencing React’s data flow and how it flows from parent to child, and not the other way around.

2. What is state?

State refers to data held and managed within the React component. State updates would typically trigger a re-render of the component, allowing a dynamic user interface.

3. What do we mean by a “stateless” component and when may we use one?

This type of React interview question would require a little bit of an understanding of the design patterns commonly applied within React.

In terms of a possible answer:

A stateless component is simply a component without state. We may use a stateless component when we simply want to display something; we don’t really want the component to create or manage it’s own internal state at all.

Stateless components are commonly referred to as “presentational” components (as opposed to container components) or “dumb” components (as opposed to smart components).

An example of a stateless component would be as follows:

const GreetingBlock = (name) => {
    return <h1>Welcome, ${name}!</h1>
}

So the component can (optionally) receive props and in turn render something out. It’s simply a building block used to construct our UI, in this way.

4. What do we mean by “composition” when speaking about React?

Composition is all about breaking down complex components to smaller, neater chunks.

This helps massively with reusability and maintaining clean, effective code.

Bonus points for: mentioning and describing inheritance, and in particular, how the idea of composition is the antithesis of this.

5. What does ReactDOM.render do?

The render method of ReactDOM renders a React element to the DOM. It’s how we “attach” React to the page, by referencing the desired element to attach along with the node we’d like to attach it to.

6. What do we mean by the “virtual DOM”?

As far as React interview questions for juniors go, I’d say these type of questions are more likely to catch candidates out. You should have at least a “passing” familiarity with the internals of React, building out apps alone may not provide you this. You may need to do some reading (of documentation and other guides)!

In terms of a possible answer:

The virtual DOM a representation of the actual DOM (document object model) used by React internally.

With the virtual DOM, there is a decision-making process which takes place prior to updating the actual DOM. React will calculate the “best” way to update the real DOM each time. This ensures that there are no (or fewer) wasted operations and hence leads to better, more efficient performance.

Bonus points for: mentioning reconcilliation.

7. What is JSX?

JSX stands for JavaScript XML, it allows us to easily write HTML and JavaScript together. We can use JSX to form the output of our components and hence build up the user interface of the application.

8. How would you render out a list in JSX?

The preferred approach is to use a map.

You can also extract out the rendering of the list to a specific function, and this function can use a regular for loop or whatever else is required.

The function can then be utilized directly when rendering the component out.

Bonus points for: mentioning why map is the preferred approach, and why you can’t use a for loop (or similar) directly in JSX.

9. How would you conditionally render something in JSX?

There are several ways to achieve this, some of the more prominent or common examples being:

Using the && (or logical and) operator:

{shouldShowTitle && <h1>My title</h1>}

Using a ternary operator:

{shouldShowTitle ? <h1>My title</h1> : <h1>My placeholder title</h1>}

Extracting the logic to a function instead:

// a function consisting of a regular if/else condition
const getTitle = () => {
    if (shouldShowTitle) {
        return <h1>My title</h1>
    } else {
        return <h1>My placeholder title</h1>
    }
}

// it can be used directly within our JSX input
{getTitle()}

10. What is the role of the “key” in a list?

Keys should be attached to each top level element inside a map. These keys are used internally by React whenever the list is modified, these keys allow React to efficiently update and re-render the list when required.

The key of each item in the map must be unique to help facilitate this functionality.

So in short, keys are to identify unique items in a list and help facilitate increased performance.

In general, it’s a good idea to touch on performance whenever possible when answering these React interview questions. An understanding and consideration of application performance is of course a vital aspect of being a developer!

11. What is the React Router responsible for?

React Router is a package used to facilitate navigation throughout your application. The package would typically be used in single page applications, where it’s necessary to navigate to different pages without reloading the browser each time.

12. Are you familiar with React Redux? If so, what problem does it solve?

In general, it’s a good idea to expect at least some questions on the most common libraries and tools with regards to the topic at hand (in this case, React). I’d still consider this to be a junior level React interview question because Redux is a very popular, commonly used solution.

In terms of a possible answer:

Redux is used for state management within your application. With Redux, we can maintain the state for an entire application.

Bonus points for: mentioning viable alternatives, such as the Context API, and touching on how Redux may not strictly be necessary based on the specific implementation or requirements of the application.

13. What is a class component?

A class component extends React.Component, and thus inherits the functionalities defined in this class.

14. What is a function (or functional) component?

A function component is composed of a regular JavaScript function, and as such, it doesn’t extend React.Component. Function components serve as an alternative to the traditional class-based approach.

15. What are the main differences between class components and function components?

In general, the main differences between these two types of components are:

  • The function component is a regular JavaScript function, whereas the class component is a class that extends React.Component
  • A function component doesn’t have access to the lifecycle methods that a class component does
  • Instead, function components can utilize hooks to achieve similar behaviour
  • A function component typically requires less code than a class component

16. What are some examples of lifecycle methods that class-based components can utilize?

Some examples of lifecycle methods would include componentDidMount and componentDidUpdate.

Bonus points for: explaining multiple lifecycle methods along with what they do, specifically. Also, clarifying that these lifecycle methods are not used in function components, but hooks are used instead.

17. What is a hook?

Hooks are special functions that allow us to use state and other React facilities outside of a class-based component. They allow us to “hook” into these functionalities.

Hooks are used inside function components, and they can help to provide similar behaviour to that of the lifecycle methods used in the class-based approach.

18. What does the useState hook do?

useState allows us to declare a variable in state with an (optional) default value. The hook returns the current item in state as well as a function we can subsequently use to update this item.

So useState is a vital building block for function components — it allows them to create and update their own internal state which is of course a core aspect of React.

19. When does the useEffect hook do?

useEffect lets you perform side-effects. So this hook can be used to react to a state change within the component; we can use it to execute it’s functionality at this point.

A trivial example of this would be:

There are two password fields. One to enter the password, one to confirm it.

We could pass in both of these items to the useEffect hook – and make a comparison to determine if any validation warnings should display. Like “your passwords don’t match” for instance.

We can consider this behaviour an “effect” of the password entry system.

20. How would we allow our component to execute some functionality once it unmounts and when would we want to do this?

In a function component, we could return a function from the useEffect hook, like:

useEffect(() => {
    return () => {
        console.log("execute some cleanup code")
    }
})

In a class component, we can use componentWillUnmount:

componentWillUnmount() {
    console.log("execute some cleanup code")
}

An example of when we would need this type of functionality would be:

The component makes an AJAX request to fetch remote data or something similar. We would want to ensure that this fetch is cancelled before unmounting the component.

21. What are some common ways to apply styling to a React component?

There are of course a variety of different ways we can style React components, including but not limited to:

  • Inline styles
  • “regular” CSS
  • CSS modules
  • CS-in-JS libraries

Bonus points for: expanding on the benefits of each approach and detailing your own preference.

22. How would you attach a CSS class to a HTML element in React?

You’d pass the class via the className property on the element.

23. How would you attach an event to a button that is triggered once the button is clicked?

You would supply an event handler using onClick. The event handler would be the function that should react to the button click on each case.

I’ve been through each of the questions, what now?

Firstly, I hope you’ve enjoyed this list of entry level React interview questions!

Once you’re well versed with the fundamentals, I’d suggest moving on to more advanced React topics. You can never over-prepare for an interview!

Areas in particular I’d recommend in this regard would be:

  • Contexts
  • Reconcilliation and how React works under the hood
  • Applicable design patterns

Of course, outside of practicing questions like these ones, it’s always important to simply keep building in React.

What is the best way to find more entry level React Interview questions?

As is usually the case, in these situations it’s often best to go directly to the source: the documentation.

Whilst preparing for junior level interview questions in particular, I think it’s a good idea to scour the different topics and get a good grasp on each and every one. You’ll likely be already somewhat familiar with most of these areas to begin with, but the importance of reading (or at least scanning through) documentation cannot be understated.

Getting a good grasp on each of the fundamental areas within the “main concepts” section before moving to the “advanced guides” would be a good suggestion.

Use the API Reference

Another handy tip would be to look at the API Reference in whatever documentation you are studying.

This is a good way to discover new functionalities you perhaps didn’t know existed previously!

The documentation in general should really be your first port of call during this type of preparation. You can then apply your new-found knowledge to interview question lists such as this one!

For general JavaScript practice

It goes without saying that it’s important to have strong native JavaScript skills, even if your main focus is specifically on React. And as such, it’s clearly a good idea to prepare ahead of time before interviewing for a JavaScript related role.

For this, I have a similar article that specifically targets entry level JavaScript interview questions. So feel free to check that out!

Outside of this, I’ve got articles revolving around different exercises to help you practice JavaScript itself, each looking at a different fundamental topic.

You can find these in my Exercises for Beginners series category.

Thanks for reading!

Have any questions? Ping me over at @justacodingblog
← Back to blog