Following up on part one, 25 Essential ReactJS Interview Questions – Building a Solid Foundation, this second installment shifts focus to candidates who have a solid foundation in ReactJS and are ready to tackle advanced interview questions. Whether you’re looking to consolidate your current knowledge or expand your skills, the next 25 questions will challenge and broaden your understanding of ReactJS, from state management, performance issues, to advanced optimization techniques. Prepare to elevate your ReactJS skills to a new level.
1. What is the difference between state and props?
State:
- Contains data about components
- Can be changed
- Child components cannot access it
- Stateless components cannot have state
Props:
- Allows passing data from one component to other components
- Cannot be changed (read-only)
- Child components can access it
- Stateless components can have props
2. What are Refs? The difference between refs and state?
Refs (References in React) are attributes that help to store references to a specific React element or component. They are returned by the component’s render configuration function.
The difference between refs and state:
- Refs are used to access and interact directly with the DOM or instances of React components. Changing the value of a ref does not trigger the component to rerender.
- State is used to store and manage the component’s status, affecting the user interface’s rerendering. When the value of state changes, React triggers the component to rerender to update the interface.
3. How many types of refs are there in ReactJs?
There are three main types: String Refs, Callback Refs, CreateRef.
4. How can a parent component call a function of a child component? (useImperativeHandle)
Refs can be used.
5. What is useEffect? What are the ways to use useEffect?
useEffect is a hook in React used to perform side effects in functional components. Side effects could be actions like calling APIs, manipulating the DOM, subscribing or unsubscribing to events, and many more actions related to interacting outside the component.
There are 2 main types of side effects:
- Effects that do not require cleanup
- Effects that require cleanup
6. What should be considered when using dependencies?
- Choosing the right dependencies:: Select dependencies such that they ensure the best performance and only run the effect when necessary.
- Avoid using too many or too few dependencies: Use only the necessary dependencies to ensure that useEffect doesn’t run excessively or insufficiently.
7. What is the comparison mechanism for the dependencies of useEffect?
React uses a special comparison mechanism to determine whether the useEffect should rerun based on the provided dependencies. This mechanism is called “dependency array comparison” or “dependency comparison.”
Comparison Mechanism:
- React uses referential equality to compare the dependencies in the array with the values of the dependencies from the previous render. If the current dependency array and the previous one have the same reference address, React assumes they have not changed, and the useEffect does not need to rerun.
- For primitive values such as numbers, strings, and booleans, React compares them by their actual value. If the corresponding value in the dependencies changes, useEffect will rerun.
- For objects and arrays, React compares them by referential equality. If an object or array is created anew on each render, useEffect will rerun.
8. What is a “side effect”? Name some side effects you commonly handle?
A “side effect” refers to unintended or unexpected changes that a function or method might cause. In React, side effects typically occur when we perform tasks that are not purely computational, such as interacting with external APIs, changing the DOM, or modifying global state.
There are two main types of side effects:
- Effects that do not require cleanup
- Effects that require cleanup
9. What is the purpose of the clean-up function in useEffect? When should it be used?
- The clean-up function in useEffect is a function you can provide to perform cleanup tasks or dispose of resources when a component unmounts or when dependencies change. This function helps avoid memory leaks, ensuring safety and cleaning up resources before the component is removed from the DOM tree.
- Use it when: Unsubscribing from events, cancelling timers or intervals, cancelling Fetch API requests, etc.
10. What are useCallback and useMemo? How are they similar and different?
useCallback and useMemo are two hooks in React designed to optimize the performance of applications by storing previous computation results. However, they serve different purposes and are used differently.
- useCallback is used to retain the same callback function across different renders when its dependencies change.
useCallbacktakes a callback function and an array of dependencies as its parameters. It returns a new version of the callback function only when one of the dependencies changes. - useMemo is used to store the result of a computation function and return the stored result when its dependencies remain unchanged.
useMemotakes a function and an array of dependencies. It returns the stored computation result and only re-computes when one of the dependencies changes.
11. What are custom hooks? Can you name some custom hooks you frequently use?
Custom hooks in React are a method for reusing the logic of React state and lifecycle within functional components. By utilizing custom hooks, you can extract the logic from the main component and share that logic across different components.
12. What is React-router-dom? Why should we use react-router-dom?
- React-router-dom is a React library that helps manage routing in React applications. It provides components and APIs to determine how application components are displayed based on the current URL. This library facilitates transitions between pages and manages routing state in web applications.
- Using react-router-dom for: navigation, updating browser URL and state, …
13. What is Nested routing? Describe its implementation.
Nested routing, or nesting routes, is a mechanism in react-router-dom that allows you to embed and manage child routes within a parent route. This helps organize and manage source code more efficiently, especially when building user interfaces with complex structures and functionalities.
14. What is <Outlet>?
<Outlet> is an important component in the react-router-dom library that helps you implement nested routing. This component is typically used in Route to mark the location where the child components of the parent route will be displayed. It acts like an “outlet” for the child components of the parent route.
15. What are the ways to navigate using react-router-dom?
- Using <Link>: The <Link> component creates links to different routes without reloading the page.
- Using useNavigate
- Using useHistory
- Using history Prop in the component
16. What is a Private Route? Describe its implementation.
A Private Route is a concept used to protect routes in a web application, especially pages that require users to be logged in to access. A Private Route typically checks if the user is logged in and redirects them to the login page if necessary.
17. How to handle the 404 page not found error?
To handle the 404 “Page Not Found” page in a React application using react-router-dom, you can use a <Route> component without the path prop. This will make this route the default route, displayed when no route matches the current URL.
18. How to pass and retrieve params through the URL?
You can use the useParams hook or through props of the component.
19. What is Prop drilling?
- Prop drilling occurs when you need to pass data from a parent component down to a lower-level component in the component tree, drilling into other components that may not need the prop values, while only a few components actually need them.
- Sometimes, the issue of prop drilling can be avoided by refactoring components, avoiding splitting components into smaller ones and keeping shared state in the nearest common ancestor component. When you need to share state between components regardless of their position in the component tree, you can use React Context API or centralized state management libraries like Redux.
20. What is Redux? How does Redux work?
Redux is an open-source JavaScript library used to manage the state of an application. React utilizes Redux to build user interfaces. It serves as a predictable container for application state and is used to manage the state of the entire application.
21. What is the difference between Action and Reducer?
Action:
- An object containing information about the action and the necessary data to change the state.
- Created through action creator functions.
- Describes “what happened”.
Reducer:
- A function responsible for changing the state based on the received action.
- Receives a state and an action, then returns a new state.
- Executes changes to the application state based on the occurred action.
22. How to dispatch an Action?
To dispatch an Action in Redux, you need to use the dispatch function provided by the Redux Store. Dispatch functions are used to send an Action to the Reducer to change the application state.
23. What is Middleware? When do you need to use middleware?
- Middleware is a layer between dispatching an Action and when it reaches the Reducer. It provides an opportunity to perform intermediate processing, monitoring, or even modifying the Action before it reaches the Reducer.
- Middleware is used for: logging, performing asynchronous processing, transforming Actions, etc.
24. How to access data from the store?
You can use the useSelector hook or combine it with connect if you are using a class component.
25. What is Context API? How does Context API work? Can Context API replace Redux?
- Context API is provided by React to address the issue of sharing state between components in an application. Before context was introduced, the only solution was to use a state management library, such as Redux. However, many developers feel that Redux introduces unnecessary complexity, especially for small applications.
- Context API in React provides a way to pass data between components without using props. The operation process of Context API is as follows:
- Create Context: Use createContext to create a Context object.
- Provide data: Use the Provider component to wrap the data-providing components and pass values through the value attribute.
- Consume data: Use the useContext hook in child components to consume data from Context. Context API can replace Redux in some cases, especially for small or simple-scale applications with low complexity.
