---
tags: Interview, Frontend
---
# Junior React Frontend Developer Interview Questions

## General Questions

### React Basics
1. What is React, and how does it differ from other JavaScript frameworks?
2. What are React components, and how do functional components differ from class components?
3. Explain the role of `props` and `state` in React.
4. What is the Virtual DOM, and how does it improve performance?

### JSX
1. What is JSX, and why is it used in React?
2. Can browsers understand JSX directly? Explain.

### React Lifecycle
1. Describe the lifecycle of a React component (class components).
2. How does the `useEffect` hook replace lifecycle methods in functional components?

### React Hooks
1. What are React Hooks, and why were they introduced?
2. Explain the purpose of `useState` and `useEffect`.
3. What are custom hooks, and how can you create one?

### Event Handling
1. How do you handle events in React?
2. What are synthetic events in React?

### React Router
1. What is React Router, and why is it used?
2. How do you implement routing in a React app?

### State Management
1. What is the Context API in React, and when should you use it?
2. What are the alternatives for managing global state in a React app?

### Error Handling
1. How do you handle errors in a React app?
2. What is the role of error boundaries?

---

# Junior React Coding Test

## Task 1: Create a Counter Component
**Description**: Create a simple React functional component that acts as a counter with the following features:
- Displays the current count.
- A "Increase" button to increment the count by 1.
- A "Decrease" button to decrement the count by 1.
- A "Reset" button to reset the count to 0.

**Requirements**:
- Use `useState` to manage the counter's state.
- Ensure the count doesn't go below 0.

---

## Task 2: To-Do List App
**Description**: Build a simple to-do list application with the following features:
- Input box to add a new to-do item.
- Display a list of to-do items.
- Allow users to mark items as complete by clicking on them.
- Provide a button to delete completed items.

**Requirements**:
- Use `useState` for state management.
- Ensure the UI updates dynamically when items are added, marked complete, or deleted.

---

## Task 3: Fetch and Display Data
**Description**: Create a React app that fetches and displays data from a public API. For example, use the [JSONPlaceholder API](https://jsonplaceholder.typicode.com/) to fetch and display a list of users.

**Features**:
- Display the name and email of each user.
- Include a loading spinner while fetching data.
- Handle errors gracefully if the API request fails.

**Requirements**:
- Use `useEffect` to fetch data.
- Use conditional rendering for loading and error states.