React JS Interview Questions

7. What are controlled components in React?

Answer: A controlled component is an input element whose value is controlled by the state of a React component. The value of the input is updated by calling setState().

class Form extends React.Component { 
constructor(props) { 
super(props);
 this.state = { value: '' };
 } 
handleChange(event) {
 this.setState({ value: event.target.value });
 } 
render() { 
return <input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />; 
} 
}

8. What are functional components and class components?

Answer:

• Functional components: Simple JavaScript functions that accept props as arguments and return JSX. They do not have internal state or lifecycle methods (unless using hooks in React 16.8+).
• Class components: ES6 classes that extend React.Component. They can hold state, use lifecycle methods, and handle more complex logic.

9. What are hooks in React?

Answer: Hooks are functions that allow you to use state and other React features in functional components. Commonly used hooks include:

• useState(): Adds state to functional components.
• useEffect(): Performs side effects in functional components.
• useContext(): Consumes values from a React Context.
• useRef(): Accesses a DOM element or stores mutable data.

10. What is the useEffect hook?

Answer: useEffect() is a hook used to perform side effects in functional components. It is similar to lifecycle methods (componentDidMount, componentDidUpdate, etc.) in class components. The hook takes a function that will run after the component renders.

Example:

11. What is Redux?

Answer: Redux is a state management library often used with React to manage and centralize the application’s state. It uses a single immutable state tree and actions to describe state changes. A reducer function processes these actions to update the state.

12. What are React Lifecycle Methods?

Answer: Lifecycle methods are special methods in class components that allow you to hook into different stages of the component’s lifecycle (e.g., mounting, updating, and unmounting). Some key lifecycle methods are:

• componentDidMount(): Called after the component is mounted.
• shouldComponentUpdate(): Determines if a component should re-render.
• componentDidUpdate(): Called after a component updates.
• componentWillUnmount(): Called just before the component is unmounted.

13. What is the difference between componentDidMount() and useEffect()?

Answer:

• componentDidMount() is a class component lifecycle method that is invoked once, immediately after the component is mounted to the DOM.
• useEffect() is a hook in functional components that can be used to perform side effects. It runs after every render, but you can control when it runs by passing a dependency array.

14. What is Context API in React?

Answer: The Context API is a way to pass data through the component tree without having to pass props down manually at every level. It is useful for sharing global data like themes, user authentication, etc.

Example:

const MyContext = React.createContext();
 function App() {
 return (
 <MyContext.Provider value="Hello World">
 <Child /> 
</MyContext.Provider> 
);
 }
 function Child() {
 const value = useContext(MyContext);
 return <div>{value}</div>;
 }

15. What are React keys, and why are they important?

Answer: Keys are unique identifiers given to elements in lists when rendering them in React. They help React identify which items have changed, are added, or are removed, which improves the performance of updates. Keys should be stable and unique to ensure efficient re-renders.

Example:

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

16. What is lazy loading in React?

Answer: Lazy loading is a technique where components are loaded only when they are needed (i.e., when they are about to be rendered). React provides React.lazy() and Suspense for this purpose. This helps reduce the initial load time of a React application by splitting the bundle into smaller pieces.

Example:

const LazyComponent = React.lazy(() => import('./LazyComponent'));
 function App() {
 return ( 
<Suspense fallback={<div>Loading...</div>}>
 <LazyComponent />
 </Suspense> 
);
 }

17. What are React Fragments?

Answer: React Fragments allow you to group a list of children without adding extra nodes to the DOM. It is useful when you want to return multiple elements from a component but don’t want to introduce unnecessary divs.

Example:

return ( <> 
<h1>Title</h1>
 <p>Some text</p>
 </> 
);

18. What is the difference between useState and useReducer?

Answer:

• useState is used for managing simple state, typically for single values like numbers, strings, or booleans.
• useReducer is used for more complex state logic that involves multiple sub-values or more complicated state transitions, often resembling Redux.

19. How does React handle events?

Answer: React events are normalized across different browsers, meaning they work consistently. React uses camelCase for event names (e.g., onClick, onChange) and passes an event object as the argument to the event handler. React event handlers are written as functions, not strings.

Example:

function handleClick() {
 alert('Button clicked!');
 } 
<button onClick={handleClick}>Click Me</button>

20. What is the useRef hook used for in React?

Answer: useRef is used to persist values across renders without causing re-renders. It can be used to access a DOM element directly or to store a mutable value that does not trigger a re-render when it changes.

Example:

const inputRef = useRef();
 const focusInput = () => {
 inputRef.current.focus();
 };
 return 
( <>
 <input ref={inputRef} /> 
<button onClick={focusInput}>Focus Input</button>
 </> 
);