Get ready for your React dev job interview in 2023 with this article

With 12 technical questions and answers to test yourself

Introduction

Preparing for an interview is always a crucial step in building a successful career path. The purpose of this article is to assist React developers in preparing for interviews in 2023 and highlight the areas worth paying attention to. Below, we provide general advice that can be useful for any interview and offer practical tips for technical interviews.

During the interview process, you can generally expect two main categories: the personal and the technical parts. The number of interview rounds, denoted as "n" varies from company to company in terms of how they imagine the hiring process. However, it is certain that in the personal section, the evaluation of soft skills and fit to the company’s culture takes the spotlight, while the technical part consists of measuring programming and technical knowledge.

General Interview Preparation Tips

Bring your CV up to date: Before the interview it is worth reviewing and update your CV, with special attention to your relevant experiences and projects, especially those related to the applied position.
Gathering information about the company: It is advisable to do the research, know the values, culture, products, services of the company.
Prepare your own questions toward the company: The interview itself is a two-way process. You have to have questions about the company and the position. You are not just looking for the answers and whether they are satisfactory to you, it is even more essential to show you are intrigued and prepared.

During interviews, there is a certain list of questions that often come up to help the employer get to know the candidate, assess their motivation, and understand their attitude toward work. Below we have gathered some of the most common such questions:

Where do you see yourself in five years?

By this question they try to measure your planning ability and how well you would fit in the company’s vision of their future. Pro tip: Don’t say in your bedroom. It doesn't always come off as you intended.

In the interview, it's advisable to emphasize your long-term plans and goals. For instance, you can mention that in the next 5 years, you want to immerse yourself in the React field, and your goal is to become a project manager who designs and leads complex applications. Additionally, emphasize your desire to become an expert in the latest React trends and technologies while also keeping in mind vanilla JS, CSS, and other development-related disciplines.

Commitment to the company and the values they represent is also important. You can express this by stating that you will remain loyal to the company and actively contribute to the values and objectives they represent.

You can also place great emphasis on self-education and personal development. For example, you can mention that you are continuously learning and growing, and you intend to apply this knowledge to the company's projects.

Finally, teamwork and networking are also crucial. It's important to highlight your ability to communicate and collaborate effectively with others on your projects and emphasize that teamwork is of paramount importance to you.

What are your strengths and weaknesses?

The question aims to figure out how honest and self-reflective you are and how well can you judge your abilities.

When you receive this question, start by talking about your strengths. For example, mention that you excel in problem-solving and passionately follow the latest developer trends, especially in the realm of React. Emphasize your ability to work effectively in a team and communicate efficiently with other developers and stakeholders.

When it comes to weaknesses, be honest but maintain a positive attitude. For instance, explain that while you navigate front-end development well with React, there is still room for growth and learning, and you're always open to accepting new challenges. Furthermore, emphasize your willingness to further develop your weaknesses and your readiness to learn and work on areas that require improvement.

The key is to respond with honesty and a positive outlook, showcasing that you view weaknesses as opportunities for growth and learning.

Why would you like to work with us?

When they ask you this, they try to get a glimpse into your motivation for joining, and how you can contribute to the company.

As you consider the possibility of joining their company, it's important to provide a suitable answer to the question of why you want to work for them. At this point, it's worth highlighting the reasons that pique your interest in the company. For example, if their company is characterized by innovation and excellence, and you value these qualities in the development field, bring this to the forefront of your response.

Also, emphasize the ways in which you could contribute to their company. If you possess professional knowledge and experience, particularly in React development, mention how you believe you can add value to their company through this expertise. It's also essential to point out why you perceive growth opportunities here and why their company appears ideal for your ambitions and professional goals.

Finally, express your eagerness to be part of this dynamic team and your readiness to contribute to their company's success. Honesty and commitment always leave a positive impression on interviewers.

What experience do you have in this field?

Hopefully this is quite obvious; the question aims to assess how well you fit the position and what relevant experiences you have.

When you receive this question, it's important to emphasize your relevant experiences that can help you appear as a suitable candidate for the position. For instance, if you have experience in React development, mention the projects you have worked on previously and the achievements you have accomplished in these projects.

Ensure that your previous experiences are detailed and relevant to the position, and present yourself confidently and succinctly.

How do you handle difficulties and conflicts in the workplace?

This question is intended to gauge how the candidate reacts to stressful situations and what problem-solving skills they possess.

If you don’t start screaming and throwing objects around, you are good to go.

Emphasize that you remain calm in stressful situations and how you handle problems thoughtfully.

It's important to provide examples from your previous workplaces or situations where you successfully managed difficult situations or conflicts. This can demonstrate that problem-solving and conflict resolution are not just theoretical skills but strong practical abilities.

Furthermore, it's worth highlighting empathy and collaboration skills as well. For instance, if you mention a conflict, illustrate how you tried to understand the other party and find a mutually beneficial solution to the problem.

Finally, don't forget to mention that you are always willing to learn and grow, and that you gain valuable experience from such situations, which helps you better handle future challenges.

Why did you leave your previous job?

Understanding your motivation: They want to understand your motivation for seeking a new job. This can provide insights into whether you are looking for career growth, a better work environment, or other personal or professional reasons.

Learning from your past experiences: Your response can provide insight into what you have learned from your past experiences and how you apply those lessons to future opportunities.

With this question, interviewers are trying to understand what motivated your career change and what lessons you've brought with you based on your previous experiences.

When you receive this question, it's important to answer honestly and positively. For example, explain what motivated your career change without speaking negatively about your previous workplace.

It's possible that new opportunities, professional development prospects, or the company's culture motivated your change. You can provide examples of how the new position aligns with your career goals and the opportunities you see for personal and professional growth.

Furthermore, it's worth discussing the lessons you've learned from your previous workplace and how you can apply them in your new role. For instance, if you learned the importance of cohesive teamwork in your previous job, mention that you're carrying that knowledge and attitude with you.

The key is to emphasize positive motivations and growth opportunities in your response and avoid negative criticism or complaints about your previous workplace.

What projects have you worked on before?

With this question, they seeking answers about the tasks and projects the interviewee has been involved in and the achievments s/he accompliesd.

First and foremost, mention the project titles and your workplace or the project initiator. For example, 'At my previous workplace, I worked on a project that...' or 'During my own business venture, within a project...'

Then, briefly talk about the project's objective and the challenges you had to face. How did you identify the problems and goals, and how did you plan the project to solve them?

Focus on the results as well. What achievements did you attain during the project? For instance, if you managed to increase website traffic or enhance user experience, mention these specific outcomes.

Don't forget to highlight your own role and contributions to the project. What specific tasks did you perform, and how did you contribute to the project's success?

Finally, try to link these projects to the new position and demonstrate how your experiences and skills can bring value to your future employer.

What accomplishments are you most proud of in your work?

Here, it's advisable to be able to list a few particularly interesting accomplishments or achievements that would earn recognition from industry professionals as well.

Technical part

GitHub: A Foundation for a Successful Interview

Github is one of the most important tools that represent your work as a developer. It is not just a repository for your code but a valuable platform where your potential employers can gain insight into the quality and consistency of your work. During the interview your Github profile represents your digital portfolio which expresses your enthusiasm toward programming.

How to use GitHub effectively during your interview?

Demonstration of cooperation and version control: You should systematically document your work's commits. Furthermore, on your personal account, you provide examples to demonstrate how how you can collaborate with others on a project.

How to use open source and private projects during your interview?

Open source contribution: Whenever possible, engage in popular open source projects. This not only showcases code quality but also demonstrates how you connect with the broader developer community.

Presentation of (personal) private projects: Showcase your own projects, even if they are not public. Describe the problems you have solved, the technologies you have employed, the dedication, and the results we've achieved.

Documentation and code quality: In addition to participating in open source projects, ensure that your own projects are well-documented and maintain a high standard of code quality.

The presentation of open source projects and personal projects reflects not only our development skills but also our commitment to growth, collaboration, and innovation. These projects form a kind of digital portfolio through which employers can see how we've embraced new technologies and contributed to the industry's advancement.

source: Github shower

If, God forbid, it's not available, do not despair. Success won't hinge on this, but having it can certainly add a strong bonus to the overall picture.

A LinkedIn: Personal Branding and Networking

LinkedIn is a massive professional network and platform where developers can connect, share their experiences, and showcase their expertise. Through this platform, we can not only reflect on our work experiences and skills but also paint a complete picture of who we are and what motivates us.

How to use LinkedIn effectively during interviews?

Profile completeness: Fill out every detail carefully, including work experience, education, skills and hobbies.

Sharing posts and articles: The content you share (such as tech updates and projects) demonstrates your professional commitment.

Networking: Connect with other developers and company leaders. Strong connections expand your opportunities.

Portfolio: Independent Work, Creativity, and Scalability

While GitHub already allows us to showcase our work, a personal portfolio can provide additional depth and context. It can be the place where we present our own projects and websites, illustrating our design and development skills.

How to Use the Portfolio Effectively During Interviews?

Diversity of Projects: Showcase different types of projects in the portfolio that you've worked on. This demonstrates your professional versatility.

Project Descriptions: Provide detailed descriptions of the projects, including their goals, the problems they solved, and the technologies used.

In preparation for the interview, GitHub, LinkedIn, and the Portfolio together support your professional credibility and personal brand. Careful use of these platforms and tools allows potential employers to get a comprehensive picture of you as a developer and a professional.

As with a GitHub account, remember that even if you don't have one, don't lose heart. Success doesn't hinge on this alone, but it can be a strong asset to your overall profile (many seniors, for example, may not have one at all).

Technical Interview

During the interview, the following questions are used to assess the applicant's coding skills and experience. They aim to gauge how deeply the interviewee has delved into the world of JS and React. The answers to these questions can help the interviewer determine whether the applicant is a junior, mid-level, senior, or at a different level in the developer hierarchy.

However, don't be surprised if other types of questions come up during the interview, such as system design, testing, optimization, and various testing methods. Different companies may have varying expectations for applicants in the same position. Therefore, every interview can be unique, shaped by the interviewer's preferences and the needs of the company's coding team. In this article, we have compiled interesting and diverse questions that you can choose from to prepare for your coding interview, regardless of which company you are applying to.

Examples of JS questions:

What is an Immediately Invoked Function Expression in JavaScript and when or why would you use it?

An Immediately Invoked Function (known as IIFE) is a function that runs as soon as it is defined.

The essence of an IIFE (Immediately Invoked Function Expression) is that it's a self-contained function that runs immediately. There is no need to name a function and then call it right afterward, saving you the time of naming it and avoiding the need to store it in memory.

Explain passed by value and passed by reference, in JS how this works?

In JavaScript, primitive data types are passed by value and non-primitive data types are passed by reference.

Most likely, it's best to illustrate with a clear code example why it matters whether you pass something as a value or a reference.

let num = 10

let obj1 = {item: "unchanged"}

let obj2 = {item: "unchanged"}

function changeStuff(a, b, c) {
  a = a * 10
  b.item = "changed"
  c = {item: "changed"}
}

changeStuff(num, obj1, obj2)

console.log(num) // 10
console.log(obj1.item) // changed
console.log(obj2.item) // unchanged

Let's see what is happening here.

In the first console.log, the value printed is 10 because we didn't change num; we simply passed its value, and then modified the copy, which has no effect on the original.

In the second console.log, it prints "changed" because the reference pointed to b.item, which is the same as obj1.item, and we modified it.

However, in the third console.log, the value printed is "unchanged." The reason is that the changeStuff function receives obj2 as a parameter, but when we modify the object within the function, it only results in a change in the reference to the object, not the object itself.

Difference between == and === operators

Both are comparison operators. The difference between both the operators is that == is used to compare values whereas, === is used to compare both values and types.

Here, the question arises, "How does one determine the type when JavaScript doesn't even have types?"

Of course, the answer is that everything has a type; it's just not mandatory in JavaScript to declare the type when declaring a variable. JavaScript can infer the type based on what you put into it (dynamically typed).

For primitives you can use the typeof operator to find out their type.

typeof 42 // "number"
typeof "42" // "string"
typeof true // "boolean"

For arrays, you can use
```
Array.isArray()
```

When it comes to objects, it's a bit trickier, for example:

function isObject (item) {
    return (typeof item === "object" && !Array.isArray(item) && item !== null)
}

What are the primitive data types in JavaScript

Boolean
Undefined
Null
Number
BigInt
String
Symbol

Explain Implicit Type Coercion in JavaScript

In JavaScript, Implicit Type Coercion is an automatic process where a value is converted from one type to another for you. It occurs when an operator in an expression encounters two values with different types.

It's important to know all of this to understand the inner workings of JavaScript and not mistakenly consider something like 5 + "5" a bug when it evaluates to "55".

JS Code Challenge

For example, to be used in HTML games, write a promisified 'load image' event.

const promisifyLoadEvent = (url) => {
    return new Promise((resolve, reject) => {
        const image = new Image()
        const error = () => {
            image.removeEventListener("load", success)
            reject(new Error(`Failed to load image's URL: ${url}`))
        }

        const success = (event) => {
            image.removeEventListener("error", error)
            resolve(event)
        }

        image.addEventListener("load", success)
        image.addEventListener("error", error)
        image.src = url
    })
}

const loadImage = async (url) => {
    const e = await promisifyLoadEvent(url)
    console.log("Image loaded!", e)
}

Examples of React questions:

What are the rules that must be followed while using React Hooks?

React Hooks must be called only at the top level. It is not allowed to call them inside the nested functions, loops, or conditions.
The order in which Hooks are used matters.
It is allowed to call the Hooks only from the React Function Components.
Cannot call any hook in ServerComponent

How does the performance of using Hooks will differ in comparison with the classes?

React Hooks will avoid a lot of overheads such as the instance creation, binding of events, etc., that are present with classes.

Hooks in React will result in smaller component trees since they will be avoiding the nesting that exists in HOCs ( Higher Order Components) and will render props which result in less amount of work to be done by React.

Could React Context replace Redux and if yes, how so?

In some cases, yes, but fundamentally, React Context is not primarily designed to fully replace state management solutions. Its main role lies in avoiding "prop drilling," which makes it effective in certain scenarios. However, it's important to note that in certain compositional patterns, it can lead to deep nesting where circular dependencies arise. In such cases, React Context might not be able to serve effectively.

Why shouldn’t we update state directly?

If you try to update state directly then it won’t re-render the component.

Instead use setter method. It schedules an update to a component’s state object. When state changes, the component responds by re-rendering.

React Code Challenges

What is wrong with this code, and how to fix it? I.

const App = () => {
    const [isMike, setIsMike] = useState(true)

    const handleClick = () => {
        setIsMike(prevState => !prevState)
    }

    return (
        <div>
            {
                isMike
                    ? <Counter name="Mike"/>
                    : <Counter name="Martha"/>
            }
            <button onClick={handleClick}>
                switch
            </button>
        </div>
    )
}

Solution: Two instances of the Counter component are created, but React cannot distinguish between them, even if they have different name props. You either need to wrap one of them in an element (span, div, etc...) or give them unique keys, for example: <Counter name="Mike" key="Mike"/> and <Counter name="Martha" key=" Martha "/>

What is wrong with this code, and how to fix it? II.

Index.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

import App from './Story'

const root = createRoot(document.getElementById("root"))

root.render(
  <StrictMode>
    <App />
  </StrictMode>
)

Story.jsx

import {useState} from 'react'

import StoryTray from './StoryTray'

let initialStories = [
    {id: 0, label: "Ankit's Story"},
    {id: 1, label: "Taylor's Story"},
]

export default function Story() {
    let [stories, setStories] = useState(initialStories)

    return (
        <div
            style={{
                width: '100%',
                height: '100%',
                textAlign: 'center',
            }}
        >
            <StoryTray stories={stories}/>
        </div>
    )
}

StoryTray.jsx

import { useState } from 'react'

export default function StoryTray({ stories }) {
    const [isHover, setIsHover] = useState(false)

    const items = stories

    items.push({ id: 'create', label: 'Create Story' })

    return (
        <ul
            onPointerEnter={() => setIsHover(true)}
            onPointerLeave={() => setIsHover(false)}
            style={{
                backgroundColor: isHover ? '#ddd' : '#fff'
            }}
        >
            {items.map(story => (
                <li key={story.id}>
                    {story.label}
                </li>
            ))}
        </ul>
    )
}

Solution: The state changes when the cursor is brought over it (onPointerEnter), causing the StoryTray to re-render. At this point, we push a new object into the items array. When we move the cursor away (onPointerLeave), the same process happens again. In Strict Mode, each rendering occurs twice in development mode to detect such errors. As a result, a new object is added to the stories array based on references. To avoid this, it is necessary to clone the stories array, for example, using [...stories] or Object.assign([], stories).

Summary:

Thank you for getting this far! We would like to add that these are our collected and deemed important thoughts, but you'll surely find a thousand and one other suggestions on the Web (we know because we've also looked around – some were very funny), whether you're interested in technical or general preparation questions. However, we hope that these guidelines and question examples will provide effective assistance for successful preparation for a React developer interview in 2023. It's important to note that interviews are not just about testing your knowledge but also giving you the opportunity to showcase your personality, problem-solving, and adaptability skills. We wish you good luck and confidence in your interviews!

Postscript:

Sorry for the “code” repetition, I managed to do it 10 times ^^