Top 40 React JS Coding Interview Questions and Answers
React JS is one of the most popular JavaScript libraries for building user interfaces, particularly for single-page applications. As companies increasingly adopt React for their front-end development, the demand for skilled React developers continues to rise. Preparing for a React JS interview requires a strong understanding of coding concepts, problem-solving skills, and practical experience with the library. In this blog, we will cover 40 React JS coding interview questions categorized by experience level, followed by a list of the best companies to apply for React JS jobs.
Beginner Level React JS Coding Interview Questions and Answers
As a beginner, you will be evaluated on your understanding of basic react JS coding concepts in the interviews. Preparing these foundational topics is essential for building a solid understanding of React before moving on to more complex challenges. We have listed down a few beginner-level react JS coding interview questions below to help you prepare for your interview.
Q1. Write a simple React component that displays “Hello, World!” on the screen.
Answer:
import React from 'react';
const HelloWorld = () => {
return <h1>Hello, World!</h1>;
};
export default HelloWorld;
Q2. Create a functional component that takes a name prop and displays a greeting message.
Answer:
import React from 'react';
const Greeting = ({ name }) => {
return <h2>Hello, {name}!</h2>;
};
export default Greeting;
Q3. Write a React component that maintains a count state and has buttons to increment and decrement the count.
Answer:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
};
export default Counter;
Q4. How do you create a controlled component for an input field?
Answer:
import React, { useState } from 'react';
const ControlledInput = () => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
return <input type="text" value={value} onChange={handleChange} />;
};
export default ControlledInput;
Also Read: Back-End Developer Interview Questions
Q5. Write a simple component that fetches data from an API and displays it.
Answer:
import React, { useEffect, useState } from 'react';
const DataFetchingComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
export default DataFetchingComponent;
Pro Tip: Working on some beginner-friendly react projects can help you understand the basic concepts required to answer such react JS coding interview questions.
Q6. How can you pass data from a parent component to a child component?
Answer:
import React from 'react';
const ChildComponent = ({ message }) => {
return <h3>{message}</h3>;
};
const ParentComponent = () => {
const message = "Hello from Parent";
return <ChildComponent message={message} />;
};
export default ParentComponent;
Q7. Write a component that toggles between two states using a button.
Answer:
import React, { useState } from 'react';
const ToggleComponent = () => {
const [isOn, setIsOn] = useState(false);
return (
<div>
<h2>{isOn ? 'On' : 'Off'}</h2>
<button onClick={() => setIsOn(!isOn)}>Toggle</button>
</div>
);
};
export default ToggleComponent;
Q8. How can you use the useEffect hook to mimic componentDidMount?
Answer:
import React, { useEffect } from 'react';
const ComponentDidMountExample = () => {
useEffect(() => {
console.log('Component Mounted');
}, []); // Empty dependency array mimics componentDidMount
return <h2>Check the console for a message.</h2>;
};
export default ComponentDidMountExample;
Q9. Write a component that displays a list of items and highlights the selected item.
Answer:
import React, { useState } from 'react';
const HighlightList = () => {
const items = ['Item 1', 'Item 2', 'Item 3'];
const [selectedIndex, setSelectedIndex] = useState(null);
return (
<ul>
{items.map((item, index) => (
<li
key={index}
onClick={() => setSelectedIndex(index)}
style={{ backgroundColor: selectedIndex === index ? 'yellow' : 'white' }}
>
{item}
</li>
))}
</ul>
);
};
export default HighlightList;
Q10. Create a simple form with validation for an email input.
Answer:
import React, { useState } from 'react';
const EmailForm = () => {
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
if (!/\S+@\S+\.\S+/.test(email)) {
setError('Invalid email format');
} else {
setError('');
console.log('Email submitted:', email);
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
/>
<button type="submit">Submit</button>
{error && <p style={{ color: 'red' }}>{error}</p>}
</form>
);
};
export default EmailForm;
Mid-Level React Programming Interview Questions
In this section, the React JS programming questions are prepared for developers with moderate experience in React. It explores deeper into react concepts. Additionally, topics like logs and react components are discussed at this level of the interview. Candidates are expected to demonstrate their practical coding knowledge and problem-solving skills when dealing with common challenges in React development.
Q11. Write a higher-order component that logs props to the console.
Answer:
import React from 'react';
const withLogging = (WrappedComponent) => {
return (props) => {
console.log('Props:', props);
return <WrappedComponent {...props} />;
};
};
export default withLogging;
Q12. Create a component that uses the useContext hook.
Answer:
import React, { useContext, createContext } from 'react';
const MyContext = createContext();
const ContextProvider = ({ children }) => {
return <MyContext.Provider value="Hello from Context">{children}</MyContext.Provider>;
};
const ComponentUsingContext = () => {
const value = useContext(MyContext);
return <h2>{value}</h2>;
};
const App = () => {
return (
<ContextProvider>
<ComponentUsingContext />
</ContextProvider>
);
};
export default App;
Q13. Write a component that fetches data using async/await.
Answer:
import React, { useEffect, useState } from 'react';
const AsyncFetchComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};
fetchData();
}, []);
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
export default AsyncFetchComponent;
Also Read: Software Engineer Interview Questions
Q14. Create a component that implements error boundaries.
Answer:
import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.log('Error logged:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
const FaultyComponent = () => {
throw new Error('I crashed!');
};
const App = () => {
return (
<ErrorBoundary>
<FaultyComponent />
</ErrorBoundary>
);
};
export default App;
Q15. How do you implement debouncing for an input field?
Answer:
import React from 'react';
import React, { useState, useEffect } from 'react';
const DebouncedInput = () => {
const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300);
return () => {
clearTimeout(handler);
};
}, [value]);
return (
<div>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Type something..."
/>
<p>Debounced Value: {debouncedValue}</p>
</div>
);
};
export default DebouncedInput;
Pro Tip: Such kinds of React JS coding interview questions aim to check your knowledge of some core React JS concepts. Preparing for these questions can significantly improve your chances of landing React JS jobs.
Q16. Write a component that uses the useReducer hook.
Answer:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
};
const CounterWithReducer = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<h2>Count: {state.count}</h2>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default CounterWithReducer;
Q17. Create a custom hook to manage the form input state.
Answer:
import React, { useState } from 'react';
const useFormInput = (initialValue) => {
const [value, setValue] = useState(initialValue);
const handleChange = (event) => {
setValue(event.target.value);
};
return {
value,
onChange: handleChange,
};
};
const CustomForm = () => {
const nameInput = useFormInput('');
return (
<form>
<input type="text" {...nameInput} placeholder="Name" />
<button type="submit">Submit</button>
</form>
);
};
export default CustomForm;
Q18. Write a component that uses local storage to save form data.
Answer:
import React, { useState, useEffect } from 'react';
const LocalStorageForm = () => {
const [name, setName] = useState('');
useEffect(() => {
const savedName = localStorage.getItem('name');
if (savedName) {
setName(savedName);
}
}, []);
const handleSubmit = (event) => {
event.preventDefault();
localStorage.setItem('name', name);
alert('Name saved to local storage!');
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
/>
<button type="submit">Save</button>
</form>
);
};
export default LocalStorageForm;
Q19. How do you create a component that uses the useMemo hook?
Answer:
import React, { useMemo, useState } from 'react';
const MemoizedComponent = () => {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
const computedValue = useMemo(() => {
console.log('Calculating...');
return count * 2;
}, [count]);
return (
<div>
<h2>Count: {count}</h2>
<h3>Computed Value: {computedValue}</h3>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
/>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default MemoizedComponent;
Q20. Write a component that implements infinite scrolling.
Answer:
import React, { useState, useEffect } from 'react';
const InfiniteScrollComponent = () => {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const fetchItems = async () => {
const response = await fetch(`https://api.example.com/items?page=${page}`);
const newItems = await response.json();
setItems(prev => [...prev, ...newItems]);
setLoading(false);
};
useEffect(() => {
fetchItems();
}, [page]);
useEffect(() => {
const handleScroll = () => {
if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight) {
setPage(prev => prev + 1);
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div>
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
{loading && <p>Loading...</p>}
</div>
);
};
export default InfiniteScrollComponent;
Pro Tip: You can effectively prepare for the React JS coding interview questions by enrolling in a React course. A React course can help you gain practical experience and knowledge of working on basic as well as advanced React JS projects.
Advanced Level React JS Tricky Interview Questions
Advanced-level questions are meant for seasoned developers who have extensive experience working with React JS. This section covers topics like code optimization, React performance tuning, and techniques such as code-splitting and lazy loading to improve efficiency. There may also be tricky questions related to server-side rendering (SSR) with Next.js, managing large-scale applications, and dealing with state management libraries like Redux or Recoil. This section tests the candidate’s ability to solve complex problems and handle real-world challenges in React development.
Q21. Write a component that uses the React. memo for optimization.
Answer:
import React from 'react';
const ChildComponent = React.memo(({ name }) => {
console.log('ChildComponent rendered');
return <h3>{name}</h3>;
});
const ParentComponent = () => {
const [count, setCount] = React.useState(0);
const name = 'John Doe';
return (
<div>
<h2>Count: {count}</h2>
<ChildComponent name={name} />
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default ParentComponent;
Pro Tip: A roadmap can prove to be beneficial while preparing for a career in the domain of React JS. You can check out the ultimate React roadmap to prepare effectively for React JS coding interviews.
Q22. Create a component that demonstrates the use of refs.
Answer:
import React, { useRef } from 'react';
const RefExample = () => {
const inputRef = useRef();
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" placeholder="Focus me!" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};
export default RefExample;
Q23. How do you implement a custom context provider?
Answer:
import React, { createContext, useContext, useState } from 'react';
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [state, setState] = useState('Default Value');
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};
const MyComponent = () => {
const { state, setState } = useContext(MyContext);
return (
<div>
<h2>{state}</h2>
<button onClick={() => setState('New Value')}>Change Value</button>
</div>
);
};
const App = () => {
return (
<MyProvider>
<MyComponent />
</MyProvider>
);
};
export default App;
Q24. Create a component that shows how to use portals.
Answer:
import React from 'react';
import ReactDOM from 'react-dom';
const Modal = ({ children }) => {
return ReactDOM.createPortal(
<div style={{ background: 'rgba(0,0,0,0.7)', padding: '20px' }}>
<h2>Modal</h2>
{children}
</div>,
document.getElementById('modal-root')
);
};
const App = () => {
return (
<div>
<h1>Main App</h1>
<Modal>
<p>This is a modal!</p>
</Modal>
</div>
);
};
export default App;
Also Read: Full Stack Interview Questions
Q25. How can you use the useLayoutEffect hook?
Answer:
import React, { useLayoutEffect, useState } from 'react';
const LayoutEffectExample = () => {
const [size, setSize] = useState(window.innerWidth);
useLayoutEffect(() => {
const handleResize = () => {
setSize(window.innerWidth);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return <h2>Window Size: {size}</h2>;
};
export default LayoutEffectExample;
Q26. Write a react component that utilizes error boundaries.
Answer:
import React from 'react';
const withLogging = (WrappedComponent) => {
return (props) => {
console.log('Props:', props);
return <WrappedComponent {...props} />;
};
};
export default withLogging;
Pro Tip: Questions around react components are asked commonly in React JS interviews. You can learn about React components in order to answer such React JS programming interview questions.
Q27. How do you implement a dynamic import in a React component?
Answer:
import React, { Suspense, useState } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
const App = () => {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>Toggle Lazy Component</button>
<Suspense fallback={<div>Loading...</div>}>
{show && <LazyComponent />}
</Suspense>
</div>
);
};
export default App;
Q28. Create a component that demonstrates how to handle fetch requests with error handling.
Answer:
import React, { useState, useEffect } from 'react';
const FetchExample = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (error) {
setError(error.message);
}
};
fetchData();
}, []);
if (error) {
return <div>Error: {error}</div>;
}
return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};
export default FetchExample;
Q29. How do you implement a loading spinner while fetching data?
Answer:
import React, { useState, useEffect } from 'react';
const LoadingSpinner = () => {
return <div>Loading...</div>;
};
const DataFetchingComponent = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
setLoading(false);
};
fetchData();
}, []);
if (loading) {
return <LoadingSpinner />;
}
return <div>{JSON.stringify(data)}</div>;
};
export default DataFetchingComponent;
Q30. How do you optimize performance using the use callback hook?
Answer:
import React, { useCallback, useState } from 'react';
const Counter = React.memo(({ increment }) => {
console.log('Counter rendered');
return <button onClick={increment}>Increment</button>;
});
const App = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, []);
return (
<div>
<h2>Count: {count}</h2>
<Counter increment={increment} />
</div>
);
};
export default App;
React JS Technical Interview Questions
This section includes various React JS technical questions with answers that span from the basics to more advanced concepts in React JS. The questions help candidates reinforce their knowledge of React’s component architecture, lifecycle methods, and state management. As the difficulty level progresses, developers will encounter more challenging topics like context API, hooks in React, error boundaries, and React patterns. This section aims to prepare candidates comprehensively, whether they are freshers or experienced professionals looking to refresh their skills.
Q31. Write a simple React component that takes props.
Answer:
import React from 'react';
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
export default Greeting;
Q32. How do you pass data from a child component to a parent component?
Answer:
import React, { useState } from 'react';
const Child = ({ onSendData }) => {
const handleClick = () => {
onSendData('Data from Child');
};
return <button onClick={handleClick}>Send Data to Parent</button>;
};
const Parent = () => {
const [data, setData] = useState('');
return (
<div>
<h2>Received: {data}</h2>
<Child onSendData={setData} />
</div>
);
};
export default Parent;
Q33. Write a code for a component that uses props to customize styling.
Answer:
import React from 'react';
const StyledComponent = ({ color }) => {
return <div style={{ color }}>This is a styled component!</div>;
};
export default StyledComponent;
Q34. How do you handle events in React? Explain with a code.
Answer:
import React from 'react';
const EventHandlingComponent = () => {
const handleClick = () => {
alert('Button clicked!');
};
return <button onClick={handleClick}>Click Me</button>;
};
export default EventHandlingComponent;
Q35. Create a simple controlled component.
Answer:
import React, { useState } from 'react';
const ControlledInput = () => {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
return <input type="text" value={value} onChange={handleChange} />;
};
export default ControlledInput;
Q36. Write a functional component with state.
Answer:
import React, { useState } from 'react';
const CounterComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default CounterComponent;
Q37. How do you implement conditional rendering in React?
Answer:
import React, { useState } from 'react';
const ConditionalRenderingComponent = () => {
const [isVisible, setIsVisible] = useState(true);
return (
<div>
{isVisible && <h2>This is visible</h2>}
<button onClick={() => setIsVisible(!isVisible)}>
Toggle Visibility
</button>
</div>
);
};
export default ConditionalRenderingComponent;
Q38. Create a component that uses effect hooks.
Answer:
import React, { useEffect, useState } from 'react';
const EffectComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count updated: ${count}`);
}, [count]);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default EffectComponent;
Q39. How do you create a form with controlled components?
Answer:
import React, { useState } from 'react';
const FormComponent = () => {
const [name, setName] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
alert(`Name: ${name}`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
/>
<button type="submit">Submit</button>
</form>
);
};
export default FormComponent;
Q40. Write a simple React component that demonstrates lifecycle methods.
Answer:
import React, { Component } from 'react';
class LifecycleExample extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate() {
console.log('Component updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h2>Count: {this.state.count}</h2>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default LifecycleExample;
Best Companies to Apply for React JS Jobs
Below is a table of some of the best companies to apply for React JS positions, along with their average salary ranges:
Company Name | Average Salary (Per Annum) |
₹12 LPA – ₹20 LPA | |
Microsoft | ₹10 LPA – ₹18 LPA |
Amazon | ₹9 LPA – ₹15 LPA |
₹11 LPA – ₹22 LPA | |
IBM | ₹8 LPA – ₹16 LPA |
Accenture | ₹7 LPA – ₹14 LPA |
Infosys | ₹6 LPA – ₹12 LPA |
TCS | ₹6 LPA – ₹11 LPA |
Wipro | ₹6.5 LPA – ₹13 LPA |
Capgemini | ₹7 LPA – ₹14 LPA |
Conclusion
A React JS interview can be a bit challenging, but with the right knowledge and practice, you can successfully land a job. This blog covered essential React JS coding interview questions and answers across various difficulty levels, from beginner to advanced. All of these questions are commonly asked in React JS interviews. By mastering these concepts and sample answers, you’ll be well-equipped to demonstrate your skills to potential employers.
FAQs
Answer: React JS is a JavaScript library for building user interfaces, particularly single-page applications. Its popularity stems from its component-based architecture, efficiency, and ability to create dynamic, high-performance web applications.
Answer: To prepare for a React JS interview, practice coding challenges, and review key concepts like hooks, state management, and component lifecycle. Familiarize yourself with common interview questions and build projects using React to enhance your practical skills.
Answer: The key React JS concepts include JSX, components (functional and class-based), props, state, lifecycle methods, hooks (useState, useEffect), context API, and error boundaries.
Answer: You can expect to solve coding problems related to component creation, state management, handling events, and optimizing performance. Interviews may include live coding sessions or take-home assignments.
Answer: Yes, there are many resources available, including the official React documentation, online courses available on Internshala trainings, YouTube tutorials, and books focused on React development.