React Questions

React, is an open-source JavaScript library for building user interfaces (UIs). It was developed and is maintained by Meta, and is widely used by developers to create interactive and dynamic web applications.

Use of Virtual DOM instead of Real DOM, JSX, Server-side rendering, Unidirectional data flow or data binding, Reusable components, etc.

JSX is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React “elements”. You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects.

Virtual DOM is the representation of a UI in the form of a plain JavaScript object. It is a node tree that lists the elements, their attributes and content as Objects and their properties. Real DOM is the real representation of a UI which can be seen and inspected in the browser. Manipulating the virtual DOM is much faster than real DOM, because nothing gets drawn on the screen. React uses this virtual DOM to figure out the most efficient way to update the browser DOM.

Refs are used to get reference to a DOM node or an instance of a component. They help to access the DOM nodes or React elements created in the render method. You can also use refs when you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.

By default, each component’s DOM nodes are private. However, sometimes it’s useful to expose a DOM node to the parent—for example, to allow focusing it. To opt in, wrap your component definition into forwardRef():

import { forwardRef } from 'react';const MyInput = forwardRef(function MyInput(props, ref) {  const { label, ...otherProps } = props;  return (    <label>      {label}      <input {...otherProps} />    </label>  );});

You will receive a ref as the second argument after props. Pass it to the DOM node that you want to expose:

import { forwardRef } from 'react';const MyInput = forwardRef(function MyInput(props, ref) {  const { label, ...otherProps } = props;  return (    <label>      {label}      <input {...otherProps} ref={ref} />    </label>  );});

This lets the parent Form component access their <input> DOM node exposed by MyInput:

function Form() {  const ref = useRef(null);  function handleClick() {    ref.current.focus();  }  return (    <form>      <MyInput label="Enter your name:" ref={ref} />      <button type="button" onClick={handleClick}>        Edit      </button>    </form>  );}

This Form component passes a ref to MyInput. The MyInput component forwards that ref to the <input> browser tag. As a result, the Form component can access that <input> DOM node and call focus() on it.

React fiber is the reconciliation engine that replaced the core algorithm in React v16. It is a rewrite of the core algorithm, responsible for scheduling what gets rendered on screen. It is a set of algorithms for efficiently updating the UI. Here is a bit-outdated but quite good article about React Fiber.

React is a library for building user interfaces. The package react contains only the renderer-agnostic code i.e. the core React library, algorithm for computing changes in the UI and other helpers. The package react-dom contains the code specific to the DOM rendering of React components.

Class components let you define your components with the help of classes. You can extend from React.Component class to create a component. Class components also allow you to define component level lifecycle methods. Function components are defined by writing a function which returns a React element. Functional components are the preferred way to write React components. There are no lifecycle methods similar to class components available in functional components; you can use React hooks instead to manage the component lifecycle.

A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it's a pattern that is derived from React's compositional nature. Higher-Order Components are not part of the React API. They are the pattern that emerges from React's compositional nature.

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes — they let you use React without classes. Some common hooks include useState, useEffect, useMemo, useRef, useCallback, etc.

You can use dangerouslySetInnerHTML prop to render HTML in React. It is used to set HTML directly from React. You should be careful while using this property as it can cause XSS attacks.

Reconciliation is the process through which React updates the DOM by comparing the newly returned elements with the previously rendered ones. React updates the DOM when a component's state changes.

Prop drilling is the process of passing data from a parent component to deeply nested child components through props. While React doesn't prohibit this, it can lead to code that is hard to maintain and understand. Excessive prop drilling can make it challenging to track data flow and can result in unnecessary re-renders. To mitigate these issues, you can use Context API or state management libraries like Redux.

The useEffect hook in React is used for performing side effects in functional components. Side effects can include data fetching, DOM manipulation, and subscribing to external data sources.

Error boundaries are special React components that catch JavaScript errors during rendering, in lifecycle methods, and during the constructor of whole tree below them. They are used to handle errors gracefully by displaying a fallback UI and preventing the entire application from crashing due to unhandled errors.

You can use react-error-boundary package to create error boundaries in your application. It provides a ErrorBoundary component that you can wrap around any component that might throw an error. The ErrorBoundary component takes a FallbackComponent prop that is used to render a fallback UI when an error occurs.

import { ErrorBoundary } from 'react-error-boundary';import { FetchData } from './FetchData';function ErrorFallback({ error, resetErrorBoundary }) {  return (    <div role="alert">      <p>Something went wrong:</p>      <pre>{error.message}</pre>      <button onClick={resetErrorBoundary}>Try again</button>    </div>  );}export function App() {  return (    <ErrorBoundary FallbackComponent={ErrorFallback}>      <FetchData />    </ErrorBoundary>  );}

This FetchData component will throw an error when it is rendered, and the ErrorBoundary component will catch the error and display the ErrorFallback component.

export function FetchData() {  throw new Error('Error fetching data');  return <p>This will never render</p>;}

React doesn't allow returning multiple elements from a component. You can use fragments to return multiple elements.

Fragments in React allow for a group of elements to be returned from a component's render method without adding an extra node to the DOM. They are useful when you want to return multiple elements without wrapping them in a parent container.

createPortal is a method on the ReactDOM object. It is used to render a React element into another DOM element outside of the parent component. This is useful for cases like modals, popups, or tooltips where you want the component to break out of its container.

ReactDOM.createPortal(child, container);

The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.

The Modal component below is a simple example of a modal component that uses createPortal to render its children into a DOM element with the id root. The Modal component is rendered as a child of the App component, but the modal itself is rendered outside of the App component.

import { createPortal } from 'react-dom';export function Modal({ isOpen, onClose, children }) {  if (!isOpen) return null;  return createPortal(    <div      role="dialog"      aria-modal="true"      style={{        position: 'fixed',        top: '50%',        left: '50%',        transform: 'translate(-50%, -50%)',        backgroundColor: 'white',        padding: '20px',        zIndex: 1000,      }}    >      <button onClick={onClose} aria-label="Close Modal">        Close      </button>      {children}    </div>,    document.getElementById('root')  );}

The Modal component can be used like this:

import { useState } from 'react';import { Modal } from './modal';export function App() {  const [isOpen, setIsOpen] = useState(false);  return (    <div>      <button onClick={() => setIsOpen(true)}>Open Modal</button>      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>        <h1>Modal Title</h1>        <p>Modal Content</p>      </Modal>    </div>  );}

The flushSync function in React is used to flush updates synchronously. It schedules updates to be performed inside a high-priority task, ensuring that the updates are executed immediately and synchronously before returning control to the caller.

import { flushSync } from 'react-dom';flushSync(callback);

This is useful in situations where you need the DOM to be updated immediately, such as for measurements or to ensure synchronous rendering. However, excessive use of flushSync can lead to degraded performance, so it should be used judiciously.

Virtual DOM works in this steps:

1. Whenever any underlying data changes, new virtual DOM representation will be created.

2. Then the difference between the previous DOM representation and the new one is calculated.

3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

In React functional components, lifecycle-like behaviors are achieved using hooks:

Utilizing the useEffect hook with an empty dependency array ([]) ensures the hook runs after the component mounts to the DOM.

useEffect(() => {  // do something after component mounts  return () => {    // do something before component unmounts  };}, []);

The cleanup function returned within the useEffect callback offers a mechanism for handling tasks when the component is about to unmount.

The useEffect hook, when invoked without a dependency array or with specific dependencies, executes after every render or when specified prop/state changes are detected.

useEffect(() => {  // do something after every render});

useEffect(() => {  // do something after specific prop/state changes}, [state1, state2]);

You can write a comment in JSX by wrapping it in curly braces and using JavaScript's multi-line comment syntax.

{/* This is a comment */}

The main difference between stateful and stateless components is one has state and the other doesn't. Stateful components keep track of changes to their state and re-render themselves when the state changes. Stateless components, on the other hand, render whatever is passed to them via props or always render the same thing.

In React, the naming convention for components is to use PascalCase, meaning the first letter of each word in the component's name should be capitalized. For example, UserProfile, SidebarItem, or NavigationMenu. This convention differentiates custom React components from regular HTML tags in JSX, as React treats elements starting with a lowercase letter as DOM tags and those starting with a capital letter as custom components.

In React, you can render a list by using the JavaScript map function to iterate over an array of items and return a JSX element for each item. It's important to provide a unique key prop to each element in the list for React's diffing algorithm to function efficiently during re-renders. Here's a basic example:

const items = ['Apple', 'Banana', 'Cherry'];function FruitList() {  return (    <ul>      {items.map((fruit, index) => (        <li key={index}>{fruit}</li>      ))}    </ul>  );}

Note: While using the index as a key can work in some cases, it's generally not recommended for dynamic lists where items can be added, removed, or reordered.

Custom hooks are a mechanism for code reuse in React and allow you to extract component logic into reusable functions. Custom hooks can be used to share logic between components or to abstract away complex logic to make components more readable.

Let's look at an example of a custom hook that return network status information:

Custom hooks are named with the prefix use and can call other hooks if needed. They can also accept arguments and return values.

import { useState, useEffect } from 'react';function useNetworkStatus() {  const [isOnline, setIsOnline] = useState(true);  useEffect(() => {    function handleOnline() {      setIsOnline(true);    }    function handleOffline() {      setIsOnline(false);    }    window.addEventListener('online', handleOnline);    window.addEventListener('offline', handleOffline);    return () => {      window.removeEventListener('online', handleOnline);      window.removeEventListener('offline', handleOffline);    };  }, []);  return isOnline;}

The custom hook above uses the useState and useEffect hooks to track the network status of the browser. It returns a boolean value that indicates whether the browser is online or offline.

function NetworkStatus() {  const isOnline = useNetworkStatus();  return (    <div>      <p>You are {isOnline ? 'online' : 'offline'}.</p>    </div>  );}

Props are used to pass data from parent to child. They are like function arguments. They are immutable. State is managed within the component and is mutable.

No, we can't change the state of the component directly. State can only be changed by using setState() method. Changing the state variable directly won't re-render the component.

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component".

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Most native React form components support both controlled and uncontrolled usage:

// Controlled:<input type="text" value={value} onChange={handleChange} />// Uncontrolled:<input type="text" defaultValue="foo" ref={inputRef} />// Use `inputRef.current.value` to read the current value of <input>

Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context is primarily used when some data needs to be accessible by many components at different nesting levels.

The useContext hook is used to access and consume context values in functional components. It provides a way to access context data without the need for a context consumer. useContext is particularly useful when you want to access context values in nested components without having to pass props through intermediate components.

CSS Stylesheets, Inline styles, CSS Modules, Styled Components, CSS in JS libraries, etc.

Pure components re-render only when the props passed to the component changes. For example, if you have a pure child component inside a parent component state changes in the parent component will not re-render the child component unless the props passed to the child component change.

To create a pure component, you can use the memo function from React. It is a higher order component which takes a component as an argument and returns a new component. The new component renders only if the props change.

import React, { memo } from 'react';const ChildComponent = ({ name }) => {  console.log('Rendering child component');  return <div>{name}</div>;};const PureChildComponent = memo(ChildComponent);const ParentComponent = () => {  const [count, setCount] = useState(0);  const [name, setName] = useState('John');  return (    <div>      <button onClick={() => setCount(count + 1)}>Count - {count}</button>      <button onClick={() => setName('Jane')}>Change name</button>      <PureChildComponent name={name} />    </div>  );};

The string attribute key is a special attribute you need to include when rendering an array of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

Unnecessary re-renders in components can occur due to several reasons, and it's important to optimize your code to minimize them for better performance.

Here are some common reasons for unnecessary re-renders in functional components:

• Using inline functions in JSX props: If you pass an inline function as a prop to child components, those components will get re-rendered every time the parent component re-renders. This is because a new function is created on every render. You can optimize this by using useCallback hook to memoize the function.

• Using useState hook with objects: If you use useState hook with objects, you need to make sure that you are not mutating the object. If you mutate the object, React will not be able to detect the change and will not re-render the component. You can optimize this by using useReducer hook instead of useState hook.

• Using useEffect hook without dependencies: If you use useEffect hook without dependencies, it will run on every render. You can optimize this by passing an empty array as the second argument to useEffect hook.

• Parent Component Re-renders: If a parent component re-renders, all its child components will also re-render. You can optimize this by using React.memo to memoize the child component where possible.

• Global State Changes: If you use global state management libraries like Redux, MobX, etc., and the global state changes, all the components that use that state will re-render. You can optimize this by using useSelector hook to select only the state that you need in a component.

• Misusing Context: If you use Context API to pass data to child components, and the data changes, all the child components will re-render. You can optimize this by using useContext hook to select only the data that you need in a component.

You can also use React.StrictMode to detect potential problems in your code that could cause unnecessary re-renders.

The useMemo hook is used to memoize the result of a computationally expensive operation in a functional component. It helps optimize performance by caching the result of the operation and returning the cached result on subsequent renders if the dependencies have not changed. This can prevent unnecessary calculations.

Concurrent React, previously referred to as Concurrent Mode, is a set of new features in React that allows React to interrupt the rendering process to consider more urgent tasks, making it possible for React to be more responsive to user input and produce smoother user experiences. It lets React keep the UI responsive while rendering large component trees by splitting the rendering work into smaller chunks and spreading it over multiple frames.

useTransition hook allows you to mark certain updates as transitions so they can be deprioritized, allowing other, more urgent updates to be processed first. This ensures that the UI remains responsive during updates that might take some time.

import { useTransition, useState } from 'react';import { Posts } from './Posts';import { Home } from './Home';import { Contact } from './Contact';export function App() {  const [isPending, startTransition] = useTransition();  const [page, setPage] = useState('home');  function changePage(newPage: string) {    startTransition(() => {      setPage(newPage);    });  }  return (    <>      <button onClick={() => changePage('home')}>Home</button>      <button onClick={() => changePage('posts')}>Posts</button>      <button onClick={() => changePage('contact')}>Contact</button>      <hr />      {isPending && <div>Loading...</div>}      {page === 'home' && <Home />}      {page === 'posts' && <Posts />}      {page === 'contact' && <Contact />}    </>  );}

export function Home() {  return <div>Home</div>;}

export function Contact() {  return <div>Contact</div>;}

Posts component is artificially delayed by 500ms to emulate extremely slow code.

export function Posts() {  const items = [];  for (let i = 0; i < 500; i++) {    items.push(<SlowPost key={i} />);  }  return <ul>{items}</ul>;}function SlowPost() {  const startTime = performance.now();  while (performance.now() - startTime < 1) {    // Do nothing for 1 ms per item to emulate extremely slow code  }  return <li>Post</li>;}

Now when you click on the Posts button, you'll notice that the UI remains responsive and you can still switch to other pages while the posts are loading. Try removing the startTransition wrapper around setPage in changePage to see the difference.

You can use React's lazy() function in conjunction with dynamic import() to lazily load a component. This is often combined with Suspense to display fallback content while the component is being loaded.

// The component has to be exported as a default exportexport default function RoadmapRender() {  return <h1>This is a lazily-loaded component!</h1>;}

import { lazy, Suspense } from 'react';const LazyRoadmapRender = lazy(() => delay(import('./RoadmapRender')));export function App() {  const [showRoadmapRender, setShowRoadmapRender] = useState(false);  return (    <>      <button onClick={() => setShowRoadmapRender(true)}>        Show RoadmapRender      </button>      {showRoadmapRender && (        <Suspense fallback={<div>Loading...</div>}>          <LazyRoadmapRender />        </Suspense>      )}    </>  );}// Helper function to simulate a 2 seconds delayfunction delay(promise) {  return new Promise((resolve) => setTimeout(resolve, 2000)).then(    () => promise  );}

The RoadmapRender component is lazily loaded and rendered inside the Suspense component. While the component is being loaded, the Suspense component will display the fallback content.

Using index as a key can negatively impact performance and may cause issues with the component state. When the list items change due to additions, deletions, or reordering, using indexes can lead to unnecessary re-renders or even incorrect UI updates. React uses keys to identify elements in the list, and if the key is just an index, it might reuse component instances and state inappropriately. Especially in cases where the list is dynamic or items can be reordered, it's recommended to use unique and stable identifiers as keys to ensure consistent behavior.

There are many reasons why an app might be slow. It could be due to a slow network, a slow backend, or a slow client. It could also be due to a memory leak, unnecessary re-renders, or large bundle sizes.

Here are some tips to help you investigate and fix performance issues:

The React DevTools Profiler helps you visualize how components render and identify costly renderings. It can also help you identify unnecessary re-renders.

Ensure that components don't render more often than needed. Be clear about the useEffect dependencies and avoid creating new objects or arrays every render, as these can trigger unnecessary child component renders. Tools like why-did-you-render can help spot unnecessary re-renders.

Use your production build to analyze your bundle size. Tools like webpack-bundle-analyzer or source-map-explorer can help you see if large libraries or unused code is slowing down the initial load.

Ensure images are appropriately sized and use modern formats. Also, consider using CDNs for assets that don't change often.

Use lazy() and dynamic imports to split your bundle and load components only when they're needed. This can help reduce the initial load time.

Slow API calls or fetching large amounts of data can affect performance. Optimize your backend, paginate data, or cache results. You can also use tools like @tanstack/react-query or swr to help manage data fetching and caching.

Ensure you're testing the performance on a production build, as development builds are often slower due to extra checks and logs.

Regularly profiling and monitoring your app can help you spot and fix performance issues before they become significant problems. You can use tools like Lighthouse or Calibre to monitor your app's performance over time.

React differs from HTML in that it uses a synthetic event system instead of directly binding to the browser’s native events. This system brings consistency and performance benefits, and it allows React to be agnostic of environments like browser, server, or React Native.

The events such as onClick, onSubmit, onFocus, etc. are all camel-cased to be consistent with the naming convention in JavaScript. React event handlers are written inside curly braces:

function activateLasers(e) {    e.preventDefault();    console.log('The button was clicked.');}<button onClick={activateLasers}>Activate Lasers</button>

In this case activateLasers is the event handler which will receive a React event object which, also known as a "synthetic event". It conforms to the same standard as the underlying DOM events, but fixes some browser inconsistencies.

Some React events do not map directly to the browser’s native events. For example in onMouseLeave, e.nativeEvent will point to a mouseout event. If you need the underlying browser event for some reason, read it from e.nativeEvent.

Visit the React documentation for further details.

The renderToString function in React is part of the react-dom/server package and is used to render React components on the server-side to a static HTML string. It is commonly used for server-side rendering (SSR) in React.

Server Components allow developers to write components that render on the server instead of the client. Unlike traditional components, Server Components do not have a client-side runtime, meaning they result in a smaller bundle size and faster loads. They can seamlessly integrate with client components and can fetch data directly from the backend without the need for an API layer. This enables developers to build rich, interactive apps with less client-side code, improving performance and developer experience.

Server Components are rendered on the server and do not require client-side JavaScript for rendering. While Server Components and Client components can coexist in the same app, Server Components can import and render Client components.

Server Components can directly access backend resources, databases, or filesystems to fetch data during rendering, eliminating the need for a separate API layer for data fetching.

The use client directive marks source files whose components are intended to execute only on the client. Conversely, use server marks server-side functions that can be invoked from client-side code.

No, hooks are not supported in Server Components. Hooks are a client-side feature and are not supported in Server Components. However, you can use hooks in client components and import them into Server Components.

Hydration is the process of using client-side JavaScript to add interactivity to the markup generated by the server. When you use server-side rendering, the server returns a static HTML representation of the component tree. Once this reaches the browser, in order to make it interactive, React "hydrates" the static content, turning it into a fully interactive application.

Suspense is a component in React that lets you specify the fallback content to display while waiting for a component to load. It is used in conjunction with lazy() to lazily load components.

import { lazy, Suspense } from 'react';const LazyRoadmapRender = lazy(() => import('./RoadmapRender'));export function App() {  const [show, setShow] = useState(false);  return (    <>      <button onClick={() => setShow(true)}>Show</button>      {show && (        <Suspense fallback={<div>Loading...</div>}>          <LazyRoadmapRender />        </Suspense>      )}    </>  );}

Until the RoadmapRender component is loaded, the Suspense component will display the Loading... fallback content.

Strict Mode is a tool in React for highlighting potential problems in an application. By wrapping a component tree with StrictMode, React will activate additional checks and warnings for its descendants. This doesn't affect the production build but provides insights during development.

import { StrictMode } from 'react';import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('root'));root.render(  <StrictMode>    <App />  </StrictMode>);

In Strict Mode, React does a few extra things during development:

1. It renders components twice to catch bugs caused by impure rendering.

2. It runs side-effects (like data fetching) twice to find mistakes in them caused by missing effect cleanup.

3. It checks if deprecated APIs are used, and logs a warning message to the console if so.