Beginner React Interview Questions – Set 2

1. How do you pass props in React?

Props are passed like attributes in JSX.

<ChildComponent propName={value} />

2. Can props be changed inside a child component?

No, props are read-only inside child components.

3. What is defaultProps in React?

defaultProps defines default values for props when the parent doesn’t provide them.

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
Welcome.defaultProps = { name: 'Guest' };

4. What is the difference between state and props?

State is internal, mutable data managed within a component, while props are external, immutable data passed from parent to child.

5. How do you initialize state in a class component?

Use a constructor or class field syntax.

class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return <div>{this.state.count}</div>;
  }
}

6. What is the setState method in class components?

setState() updates the component’s state and triggers a re-render.

this.setState({ count: this.state.count + 1 })

7. What is the purpose of the dependency array in useEffect?

It tells useEffect which variables to watch for changes. If empty ([]), it runs once after mount.

8. How do you fetch data in a React component?

Use useEffect with fetch or axios.

useEffect(() => {
  fetch('<https://api.example.com/data>')
    .then(res => res.json())
    .then(setData);
}, []);

9. How do you handle forms in React?

By using controlled components, where form inputs are bound to React state.

10. How do you get input value in React?

Use the onChange event to update state.

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

11. What is a controlled form input?

A form element whose value is managed by React state.

12. What is an uncontrolled component?

A form element that maintains its own state, accessed via ref.

13. How do you use refs in React?

Use useRef (functional) or createRef (class) to access DOM elements.

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

14. How do you focus an input in React?

inputRef.current.focus();

15. Difference between HTML for and React htmlFor?

htmlFor is used in JSX because for is a reserved keyword in JavaScript.

16. How do you handle multiple form inputs?

Use a single state object and computed property names.

setForm({ ...form, [e.target.name]: e.target.value });

17. How to prevent default form submission?

e.preventDefault();

18. How do you call a function on button click?

<button onClick={handleClick}>Click</button>

19. Can you pass arguments to event handlers?

Yes, using arrow functions.

onClick={() => handleClick(id)}

20. What is a synthetic event in React?

A cross-browser wrapper around native DOM events that works consistently in all browsers.

21. Difference between React event and DOM event?

React events are synthetic, normalized, and part of the React event system.

22. How do you stop event propagation?

e.stopPropagation();

23. What is two-way binding in React?

It’s achieved with controlled components where the input reflects state, and state updates from input.

24. How do you conditionally disable a button?

<button disabled={isDisabled}>Submit</button>

25. How do you render lists in React?

items.map(item => <li key={item.id}>{item.name}</li>);

26. Why is the key prop important in lists?

It helps React efficiently identify which list items changed, added, or removed.

27. Can you nest components in React?

Yes, components can contain other components as children.

28. What is the children prop?

It represents content between a component’s opening and closing tags.

function Wrapper({ children }) {
  return <div>{children}</div>;
}

29. How do sibling components communicate?

By lifting shared state up to the parent and passing it down via props.

30. What is prop drilling?

Passing props through many nested components unnecessarily to reach a deeply nested one.

31. What are Higher-Order Components (HOCs)?

Functions that take a component and return an enhanced version with added functionality.

32. What is React.memo?

A higher-order function that memoizes functional components, preventing re-renders if props don’t change.

33. How do you prevent a child component from re-rendering?

Use React.memo() for functional components or PureComponent for class components.

34. What is the difference between useEffect and useLayoutEffect?

useEffect runs after rendering (asynchronously), while useLayoutEffect runs before the browser paints (synchronously).

35. What is useCallback?

It memoizes functions to prevent re-creation on every render.

36. What is useMemo?

It memoizes computed values to avoid expensive recalculations unless dependencies change.

37. What is useReducer?

A hook that manages complex state logic using a reducer function, similar to Redux.

38. What is React.StrictMode?

A wrapper used in development to highlight potential problems and unsafe practices.

39. How do you navigate in React?

Using React Router (react-router-dom) with components like <BrowserRouter>, <Route>, and <Link>.

40. How do you style components in React?

Use inline styles, CSS classes, CSS modules, or libraries like styled-components.

41. How do you conditionally apply CSS classes?

className={isActive ? "active" : "inactive"}

42. How do you clean up side effects in useEffect?

Return a cleanup function.

useEffect(() => {
  const timer = setInterval(() => console.log('Tick'), 1000);
  return () => clearInterval(timer);
}, []);