Top 30 React Coding Interview Questions (2026 Guide with Examples)

🚀 Introduction

In React interviews, coding questions test your practical knowledge of React. You’ll be asked to write components, manage state, and solve real-world UI problems.

This post covers 30 important React coding interview questions with examples to help you prepare effectively.

📌 Top 30 React Coding Interview Questions and Examples

1. Create a simple counter using useState


const Counter = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

2. Toggle a boolean value


const Toggle = () => {
  const [isOn, setIsOn] = React.useState(false);
  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
};

3. Display a list using map()


const List = () => {
  const items = ["Apple", "Banana", "Mango"];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

4. Handle form input


const Form = () => {
  const [name, setName] = React.useState("");
  return (
    <input value={name} onChange={(e) => setName(e.target.value)} />
  );
};

5. Fetch API data using useEffect


React.useEffect(() => {
  fetch("https://api.example.com/data")
    .then(res => res.json())
    .then(data => console.log(data));
}, []);

6. Conditional rendering


{isLoggedIn ? <Dashboard /> : <Login />}

7. Show/hide component


{show && <Component />}

8. Create reusable button component


const Button = ({ text }) => <button>{text}</button>;

9. Pass props between components


<Child name="React" />

10. Use useRef to access input


const ref = React.useRef();
<input ref={ref} />

11. Create custom hook


const useCounter = () => {
  const [count, setCount] = React.useState(0);
  return { count, setCount };
};

12. Debounce input


React.useEffect(() => {
  const timer = setTimeout(() => {
    console.log(value);
  }, 500);
  return () => clearTimeout(timer);
}, [value]);

13. Create modal component


{isOpen && <div className="modal">Modal Content</div>}

14. Handle multiple inputs


const [form, setForm] = React.useState({});
const handleChange = e => {
  setForm({ ...form, [e.target.name]: e.target.value });
};

15. Filter list


items.filter(item => item.includes("a"));

16. Sort array


items.sort((a, b) => a - b);

17. Controlled checkbox


const [checked, setChecked] = React.useState(false);
<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />

18. Dynamic styling


<div style={{ color: isRed ? "red" : "blue" }}>Text</div>

19. Use React.memo


export default React.memo(Component);

20. Lazy load component


const LazyComp = React.lazy(() => import("./Comp"));

21. Use Context API


const value = React.useContext(MyContext);

22. Error boundary (class)


class ErrorBoundary extends React.Component {
  componentDidCatch(error) {
    console.log(error);
  }
}

23. Pagination logic


const start = (page - 1) * limit;
const paginated = data.slice(start, start + limit);

24. Infinite scroll logic


window.addEventListener("scroll", () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    loadMore();
  }
});

25. Form validation


if (!email.includes("@")) alert("Invalid email");

26. Prevent re-render


const memoValue = React.useMemo(() => compute(), []);

27. Handle API error


try {
  const res = await fetch(url);
} catch (err) {
  console.error(err);
}

28. Combine reducers


const rootReducer = combineReducers({ user, auth });

29. Dynamic routes


<Route path="/user/:id" />

30. Cleanup event listener


React.useEffect(() => {
  window.addEventListener("resize", handle);
  return () => window.removeEventListener("resize", handle);
}, []);

🎯 Conclusion

Practicing these React coding questions will help you perform confidently in technical interviews and real-world projects.

❓ FAQs

Q1: Are coding questions asked in React interviews?

Yes, most interviews include practical coding rounds.

Q2: How to practice React coding?

Build mini projects and solve real-world problems.

Q3: Which topics are important?

Hooks, state management, API calls, and component design.

🔗 Internal Linking

👉 Previous Post: Advanced React Interview Questions (Post 3)

👉 Next Post: React Hooks Interview Questions (Post 5)

📢 Tags

React Coding Questions, React Interview, Frontend Coding, JavaScript, React Hooks