ReactJS Interview Questions and Explanations for Freshers
Basic ReactJS Interview Questions with Explanations
1. What is ReactJS?
ReactJS is a JavaScript library developed by Facebook for building user interfaces, especially
single-page applications. It helps create fast and interactive UIs using reusable components.
2. What are the features of ReactJS?
- JSX - A syntax extension that lets you write HTML in JavaScript.
- Components - Reusable, independent pieces of UI.
- Virtual DOM - Improves performance by updating only changed elements.
- One-way data binding - Data flows from parent to child.
- Unidirectional flow - Ensures data is predictable and easier to debug.
3. Difference between Class and Functional Components?
- Class Component: Uses ES6 classes, can use lifecycle methods, and state is managed using
`this.state`.
- Functional Component: A simpler syntax using functions; can use Hooks for state and side effects.
4. What is JSX?
JSX (JavaScript XML) allows you to write HTML-like syntax in JavaScript files. It makes the code
easier to read and write.
Example: const element = <h1>Hello, world!</h1>;
5. What are props in React?
Props (short for "properties") are read-only inputs passed from a parent to a child component. They
help make components reusable.
6. What is state in React?
State is a built-in object used to contain data or information about the component. It can be changed
within the component and triggers a re-render.
7. Difference between props and state?
Props: Immutable, passed by parent, used for communication.
State: Mutable, managed inside component, used to control behavior.
8. How do you create a React app?
You can use the create-react-app CLI tool:
npx create-react-app my-app
cd my-app
npm start
9. What is the virtual DOM?
The Virtual DOM is a lightweight copy of the actual DOM. React updates the virtual DOM first,
compares it with the previous version (diffing), and then updates only the changed parts in the real
DOM.
10. What is the render() method?
In class components, render() returns the JSX that should be rendered on the screen.
Component Lifecycle (Class-based Components)
1. What are the phases of the React component lifecycle?
React component lifecycle has 3 main phases:
- Mounting: Component is being created and inserted into the DOM.
- Updating: Component is re-rendered due to state or prop changes.
- Unmounting: Component is removed from the DOM.
2. What are componentDidMount(), componentDidUpdate(), and componentWillUnmount()?
- componentDidMount(): Called once after the component is added to the DOM. Used for API calls
or DOM manipulations.
- componentDidUpdate(): Called after component updates due to changes in props/state.
- componentWillUnmount(): Called just before the component is removed. Used for cleanup (e.g.,
removing event listeners).
React Hooks (Functional Components)
1. What are React Hooks?
Hooks are functions introduced in React 16.8 that let you use state and lifecycle features in
functional components.
2. What is useState()?
useState is a Hook that lets you add state to a functional component.
Example:
const [count, setCount] = useState(0);
3. What is useEffect()?
useEffect lets you perform side effects (like data fetching, setting timers) in functional components.
Example:
useEffect(() => {
console.log("Component mounted or updated");
}, []); // Empty array means it runs only once (on mount).
4. Can you use hooks inside class components?
No, Hooks only work in functional components.
Event Handling and Forms
1. How do you handle events in React?
You handle events like this:
<button onClick={handleClick}>Click Me</button>
2. How do you handle form inputs in React?
By using state to store the form values and onChange handlers to update them.
Example:
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
3. What is controlled vs uncontrolled component?
Controlled: React controls the form input using state.
Uncontrolled: Uses refs to access the DOM elements directly.
Conditional Rendering
1. How do you implement conditional rendering?
Using JavaScript operators like `if`, `&&`, or ternary `? :` inside JSX.
Example:
{isLoggedIn ? <Logout /> : <Login />}
2. Difference between if, &&, and ternary?
- `if` can't be used directly in JSX.
- `&&` renders the second part if the first is true.
- Ternary returns one of two values depending on the condition.
Lists and Keys
1. How do you render a list in React?
Using the map() function.
Example:
{items.map(item => <li key={item.id}>{item.name}</li>)}
2. Why is the key prop important?
Keys help React identify which items have changed, are added, or removed, improving performance
during re-renders.
