React/MERN fresher interview

 Absolutely. For a React/MERN fresher interview, these are the most common React + Hooks questions you should prepare. Since React.js is explicitly on Anshuket’s resume, interviewers are very likely to ask these.

React Interview Questions & Answers

1. What is React?

Answer:

React is a JavaScript library used to build user interfaces, especially single-page applications. It was developed by Facebook.

React is component-based, which means we divide the UI into reusable components. It also uses a Virtual DOM to efficiently update the actual DOM.

---

2. What are the main features of React?

Answer:

The important features are:

• Component-based architecture
• Virtual DOM
• JSX
• One-way data binding
• Reusable components
• Hooks
• Declarative programming
• Large ecosystem

---

🔥 React Hooks

3. What are React Hooks?

Answer:

Hooks are special functions introduced in React 16.8 that allow functional components to use features such as state and lifecycle-related functionality.

Common hooks include useState, useEffect, useContext, useRef, useMemo, and useCallback.

---

4. What is useState()?

Answer:

useState is used to add and manage state in a functional component.

It returns two things: the current state value and a function used to update that state.

Example:

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

Here:

• count → current state
• setCount → updates state
• 0 → initial value

Interview follow-up:

Q: Does changing state immediately change the variable?

Answer:

React schedules a state update and then re-renders the component. We should not assume that the state variable has changed immediately within the same execution.

---

5. What is useEffect()?

Answer:

useEffect is used to perform side effects in a functional component.

Examples of side effects include API calls, subscriptions, timers, event listeners, and updating something outside React.

Example:

useEffect(() => {
  console.log("Component rendered");
}, []);

---

6. What does the dependency array in useEffect do?

This is very commonly asked.

Empty array

useEffect(() => {
  console.log("Runs once");
}, []);

Runs after the initial render.

With dependency

useEffect(() => {
  console.log("Count changed");
}, [count]);

Runs when count changes.

Without dependency array

useEffect(() => {
  console.log("Runs after every render");
});

Runs after every render.

Interview answer:

The dependency array controls when the effect should run. An empty array generally means the effect runs after the initial render, while specifying dependencies makes the effect re-run when those values change.

---

7. What is cleanup in useEffect()?

Answer:

Cleanup is used to remove or stop resources created by an effect, such as event listeners, timers, or subscriptions.

Example:

useEffect(() => {
  const handleResize = () => {
    console.log(window.innerWidth);
  };

  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

The returned function is the cleanup function.

---

8. What is useContext()?

Answer:

useContext allows components to access data from a React Context without manually passing props through every intermediate component.

For example, it can be used for:

• Theme
• Authentication/user information
• Language
• Global settings

Example:

const user = useContext(UserContext);

---

9. What is useRef()?

Answer:

useRef is used to store a mutable value that persists between renders without causing a re-render when the value changes.

It is also commonly used to directly access a DOM element.

Example:

const inputRef = useRef();

<input ref={inputRef} />

Then:

inputRef.current.focus();

---

10. useState vs useRef

useState	useRef
Stores state	Stores mutable reference
Updating it causes re-render	Updating .current doesn't cause re-render
Used for UI data	Often used for DOM references
State updates are handled by React	Mutable .current value

Interview answer:

If changing the value should update the UI, I would generally use useState. If I need to persist a value between renders without triggering a re-render, I would consider useRef.

---

11. What is useMemo()?

Answer:

useMemo is used to memoize the result of a calculation so React can reuse the previously calculated value when its dependencies haven't changed.

Example:

const expensiveValue = useMemo(() => {
  return calculateSomething(data);
}, [data]);

Important:

Don't say:

"useMemo makes the application faster."

Better:

"useMemo can optimize expensive calculations by avoiding unnecessary recalculation."

---

12. What is useCallback()?

Answer:

useCallback memoizes a function so that React can reuse the same function reference between renders until its dependencies change.

Example:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

It can be particularly useful when passing callbacks to memoized child components.

---

13. useMemo vs useCallback

This is a very common interview question.

Answer:

useMemo memoizes a calculated value, while useCallback memoizes a function.

useMemo(() => expensiveCalculation(), [data]);

returns a value.

useCallback(() => handleClick(), [data]);

returns a function.

Easy way to remember:

useMemo → value

useCallback → function

---

14. What is React.memo()?

Answer:

React.memo is a higher-order component used to prevent a functional component from re-rendering when its props haven't changed.

Example:

const User = React.memo(function User({ name }) {
  return <h1>{name}</h1>;
});

---

15. React.memo vs useMemo vs useCallback

Feature	Purpose
React.memo	Memoizes a component
useMemo	Memoizes a calculated value
useCallback	Memoizes a function

Easy interview answer:

“React.memo is for components, useMemo is for values, and useCallback is for functions.”

---

🔥 Very Common React Questions

16. What is JSX?

Answer:

JSX stands for JavaScript XML. It allows us to write HTML-like syntax inside JavaScript code.

JSX is transformed into JavaScript that React can understand.

Example:

const element = <h1>Hello World</h1>;

---

17. What is Virtual DOM?

Answer:

The Virtual DOM is an in-memory representation of the UI.

When state or props change, React creates a new representation, compares it with the previous one, and updates the necessary parts of the actual DOM.

---

18. What is reconciliation?

Answer:

Reconciliation is React's process of comparing the previous UI representation with the new one and determining what changes need to be applied to the actual DOM.

---

19. What are Props?

Answer:

Props are inputs passed from a parent component to a child component. They are read-only from the receiving component's perspective.

Example:

<User name="Anshuket" />

Here name is a prop.

---

20. Props vs State?

Answer:

Props	State
Passed by parent	Managed by component
Read-only	Can be updated
Used to pass data	Used for dynamic data
Changes come from parent	Changes trigger re-render

One-line answer:

Props are used to pass data between components, while state is used to manage changing data inside a component.

---

21. What is conditional rendering?

Answer:

Conditional rendering means displaying different UI based on a condition.

Example:

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

---

22. How do you render a list in React?

Answer:

Usually using map():

const users = ["A", "B", "C"];

return (
  <ul>
    {users.map((user) => (
      <li key={user}>{user}</li>
    ))}
  </ul>
);

---

23. Why is key important in React?

Answer:

Keys help React identify which items in a list have changed, been added, or removed.

A stable and unique key helps React efficiently update the list.

Avoid using array index as a key when the list can be reordered, inserted into, or deleted from.

---

24. What is lifting state up?

Answer:

Lifting state up means moving shared state to the closest common parent component so that multiple child components can access and update the same data through props.

---

25. What is one-way data flow?

Answer:

In React, data generally flows from parent to child through props. This makes the application's data flow easier to understand and debug.

---

26. What is a controlled component?

Answer:

A controlled component is a form element whose value is controlled by React state.

Example:

const [name, setName] = useState("");

<input
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

---

27. What is an uncontrolled component?

Answer:

An uncontrolled component stores its current value in the DOM rather than React state. We can commonly access its value using useRef.

---

28. Controlled vs Uncontrolled Component

Controlled	Uncontrolled
React controls value	DOM controls value
Uses state	Often uses ref
Easier validation/control	Simpler for some forms
More predictable	Less React state management

---

🔥 Hooks You MUST Know

For your interview, remember this table:

Hook	Main purpose
useState	Manage state
useEffect	Side effects
useContext	Consume context
useRef	Persistent mutable value / DOM reference
useMemo	Memoize value
useCallback	Memoize function
useReducer	Manage complex state logic

Most important for fresher interviews:

⭐⭐⭐⭐⭐ useState

⭐⭐⭐⭐⭐ useEffect

⭐⭐⭐⭐ useContext

⭐⭐⭐⭐ useRef

⭐⭐⭐ useMemo

⭐⭐⭐ useCallback

⭐⭐ useReducer

---

🚨 10 Questions I'd expect the interviewer to ask

If you have limited preparation time, learn these first:

1. What is React and why use it?
2. What are React Hooks?
3. Explain useState.
4. Explain useEffect and dependency array.
5. What is cleanup in useEffect?
6. useState vs useRef?
7. useMemo vs useCallback?
8. Props vs State?
9. What is Virtual DOM?
10. Explain one of your React projects technically.

For Anshuket specifically, #10 is especially important because the resume says the Hostel Management System uses React.js + React Native + Node.js + Express.js + MongoDB, so the interviewer can easily turn the project into a 10–15 minute technical discussion.