Core concepts
List three main rules of JSX.
1. Return a single root element (To return multiple elements from a component, wrap them with a single parent tag ).
2. Close all the tags (JSX requires tags to be explicitly closed: self-closing tags like <img> must become <img />, and wrapping tags like <li>oranges must be written as <li>oranges</li>).
3. Always use camelCase (HTML and SVG attributes are written in camelCase. For example, instead of stroke-width you use strokeWidth. In addition class is reserved word - you should use className instead).
How can a class component become an error boundary in React?
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch().
Why we need to pass a function to setState()?
The reason behind for this is that setState() is an asynchronous operation. The solution is to pass a function to setState(), with the previous state as an argument. By doing this you can avoid issues with the user getting the old state value on access due to the asynchronous nature of setState().
What is a reducer in Redux and what parameters does it take?
A reducer is a pure function that takes the state and action as parameters. Inside the reducer, we track the type of the received action and, depending on it, we modify the state and return a new state object.
What are the <Router> components of React Router v4?
React Router v4 provides below 3 <Router> components:
<BrowserRouter>
<HashRouter>
<MemoryRouter>
The above components will create browser, hash, and memory history instances. React Router v4 makes the properties and methods of the history instance associated with your router available through the context in the router object.
What is the VirtualDom and is the Shadow Dom the same as the virtual Dom?
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
How to achieve behaviour similar to componentWillUnmount in React functional components?
By returning a function from the useEffect hook, you can specify cleanup operations to be performed when the component is unmounted.
How to use useReducer?
The useReducer Hook is used to store and update states, just like the useState Hook. It accepts a reducer function as its first parameter and the initial state as the second. useReducer returns an array that holds the current state value and a dispatch function to which you can pass an action and later invoke it.
How are Actions defined in Redux?
In Redux, actions are plain JavaScript objects that represent payloads of information that send data from your application to the Redux store. They are the only source of information for the store. Actions must have a type property that indicates the type of action being performed. They can also include additional data called the payload.
What is the purpose of the 'exact' prop in a Route component?
The 'exact' prop in a Route component ensures that the specified path must match the URL exactly for the Route to be considered a match. Without 'exact,' a Route will match any URL that begins with the specified path. Using 'exact' is essential when you want to render a component only when the URL path matches exactly.
What is props drilling in React, and how can you mitigate its drawbacks?
Props drilling refers to the process of passing props through multiple layers of components in a React application, even when intermediate components do not directly use those props. It can lead to decreased code maintainability and readability. To mitigate the drawbacks of props drilling, you can use context or state management libraries like Redux.
What is the second parameter in React.memo() and what is it for?
arePropsEqual: A custom compare function that accepts two arguments: the component’s previous props, and its new props.
Why React's useDeferredValue hook is useful?
The useDeferredValue hook in React is useful for optimizing performance by deferring the update of a value until a later point in time. This can be particularly beneficial for scenarios where updating a value immediately would lead to unnecessary re-renders or performance bottlenecks.
What is the difference between a smart component and a dumb component in React?
In summary, smart components handle logic, state management, and data fetching, while dumb components focus solely on presenting UI elements without any logic or awareness of the application's state. This separation of concerns promotes a cleaner and more maintainable codebase by encouraging modularization and reusability.
Can we use React Router with server-side rendering?
Yes, React Router can be used with server-side rendering (SSR). While React Router primarily handles client-side routing, it is compatible with server-side rendering frameworks like Next.js that allows you to render React components on the server and send the fully rendered HTML to the client.
What is list virtualization?
List virtualization is a crucial optimization technique for React applications dealing with large lists of data. By rendering only the visible items and dynamically replacing off-screen items, list virtualization significantly improves performance, leading to faster load times and smoother scrolling experiences.
What is a React portal, and how does it differ from traditional rendering methods?
A React portal is a feature that allows you to render children components into a DOM node that exists outside the parent component's DOM hierarchy. This allows for greater flexibility in rendering components, such as rendering modals, tooltips, or dropdown menus at the top level
What does useTransition hook return?
What is the purpose of callback function as an argument of setState()?
The callback function is invoked when setState finished and the component gets rendered. Since setState() is asynchronous the callback function is used for any post action.
What are route guards in React Router, and how do you implement them?
Route guards in React Router are used to manage access to specific routes based on conditions or user authentication. To implement route guards, you can use 'Route' components in combination with custom logic. For instance, you can conditionally render a component based on user authentication or other criteria. Additionally, 'Redirect' components can be used to enforce redirection to a different route when needed.
What is React Reconciliation?
Reconciliation is a React algorithm used to distinguish one tree of elements from another to determine the parts that will need to be replaced.
Reconciliation is a core algorithm in React responsible for efficiently updating the user interface. It compares two virtual trees of elements: the previous tree representing the current state of the UI and the new tree generated after a state update. By identifying the differences between these trees, reconciliation determines the minimal set of operations needed to update the actual DOM, ensuring optimal performance and rendering only the necessary changes.
What is Fiber in React?
In React, Fiber refers to a reimplementation of the core algorithm that manages the prioritization, scheduling, and rendering of updates to the component tree. It was introduced in React version 16 to improve the performance and responsiveness of React applications, especially for complex and high-frequency user interactions.
Name the rules that must be followed while using React Hooks.
You can only call the React Hooks from the react functional components. React hooks must only be called at the top level. They should not be called inside nested functions, loops or conditions.
What is the difference between Redux and Mobx?
Redux is a simpler and more opinionated state management library that follows a strict unidirectional data flow and promotes immutability. It requires more boilerplate code and explicit updates but has excellent integration with React. Mobx, on the other hand, provides a more flexible and intuitive API with less boilerplate code. It allows you to directly modify the state and automatically tracks changes for better performance.
What is the role of the 'BrowserRouter' component, and when should you use 'HashRouter' instead?
The 'BrowserRouter' component in React Router is typically used for routing and utilizes the HTML5 History API to create clean and user-friendly URLs. 'HashRouter,' on the other hand, uses URL fragments (hashes) for routing. 'HashRouter' is the preferred option when deploying your application to a server that does not support URL rewriting or when dealing with static file hosting. In most other cases, 'BrowserRouter' is the recommended choice for clean and intuitive URLs.