React Interview Questions

TL;DR

In React, state is a local data storage that is managed within a component and can change over time, while props are read-only attributes passed from a parent component to a child component. State is used for data that changes within a component, whereas props are used to pass data and event handlers to child components.

What is the difference between state and props in React?

State

State is a built-in object in React components that holds data or information about the component. It is managed within the component and can change over time, usually in response to user actions or network responses. When the state changes, the component re-renders to reflect the new state.

• State is local to the component and cannot be accessed or modified outside of it
• State can be initialized in the constructor of a class component or using the useState hook in a functional component
• State changes are asynchronous and should be done using the setState method in class components or the updater function returned by useState in functional components

Example of state in a class component:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Example of state in a functional component:

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Props

Props (short for properties) are read-only attributes passed from a parent component to a child component. They are used to pass data and event handlers down the component tree. Props are immutable, meaning they cannot be changed by the child component.

• Props are passed to the child component as an argument to the component function or as a property on the this object in class components
• Props allow components to be reusable by passing different data to them
• Props can be used to pass functions as well, enabling child components to communicate with parent components

Example of props in a class component:

class ParentComponent extends React.Component {
  render() {
    return <ChildComponent message="Hello, World!" />;
  }
}

class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}

Example of props in a functional component:

function ParentComponent() {
  return <ChildComponent message="Hello, World!" />;
}

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

Key differences

• State is managed within the component, while props are passed from a parent component
• State can change over time, while props are immutable
• State is used for data that changes within a component, while props are used to pass data and event handlers to child components

Further reading

• React documentation on state
• React documentation on components and props
• React Hooks documentation

TL;DR

React is a JavaScript library created by Facebook for building user interfaces, primarily for single-page applications. It allows developers to create reusable components that manage their own state. Key benefits of React include a component-based architecture for modular code, the virtual DOM for efficient updates, a declarative UI for more readable code, one-way data binding for predictable data flow, and a strong community and ecosystem with abundant resources and tools.

Key characteristics of React:

• Declarative: You describe the desired state of your UI based on data, and React handles updating the actual DOM efficiently.
• Component-based: Build reusable and modular UI elements (components) that manage their own state and logic.
• Virtual DOM: React uses a lightweight in-memory representation of the actual DOM, allowing it to perform updates selectively and efficiently.
• JSX: While not mandatory, JSX provides a syntax extension that allows you to write HTML-like structures within your JavaScript code, making UI development more intuitive.

What is React?

React is an open-source JavaScript library developed by Facebook for building user interfaces. It focuses on the view layer of an application and is especially useful for creating single-page applications where a seamless user experience is crucial. React allows developers to build encapsulated components that manage their own state and compose them to create complex UIs.

Benefits of React

1. Component-based architecture

React encourages breaking down your UI into independent, reusable components. Each component encapsulates its own state, logic, and rendering, making your code:

• Modular and reusable: Components can be easily reused across different parts of your application or even in other projects.
• Maintainable: Changes within a component are isolated, reducing the risk of unintended side effects.
• Easier to test: Components can be tested independently, ensuring their functionality and reliability.

2. Virtual DOM and efficient updates

React utilizes a virtual DOM, a lightweight in-memory representation of the actual DOM. When data changes, React first updates the virtual DOM, then compares it to the previous version. This process, known as diffing, allows React to identify the minimal set of changes required in the actual DOM. By updating only the necessary elements, React minimizes expensive DOM manipulations, resulting in significant performance improvements.

3. Large and active community

React boasts a vast and active community of developers worldwide. This translates to:

• Extensive documentation and resources: Find comprehensive documentation, tutorials, and community-driven resources to aid your learning and development process.
• Abundant third-party libraries and tools: Leverage a rich ecosystem of pre-built components, libraries, and tools that extend React's functionality and streamline development.
• Strong community support: Seek help, share knowledge, and engage with fellow developers through forums, online communities, and meetups.

4. Learn once, write anywhere

React's versatility extends beyond web development. With React Native, you can use your React knowledge to build native mobile applications for iOS and Android. This "learn once, write anywhere" approach allows you to:

• Share code between platforms: Reuse components and logic across web and mobile, reducing development time and effort.
• Leverage existing skills: Apply your React expertise to mobile development without needing to learn entirely new technologies.
• Target multiple platforms with a single codebase: Streamline development and maintenance by managing a single codebase for multiple platforms.

Further reading

• React Official Website: https://react.dev/
• React Documentation: https://react.dev/learn
• React Blog: https://react.dev/blog
• React Native: https://reactnative.dev/

TL;DR

A React Node is any renderable unit in React, such as an element, string, number, or null. A React Element is an immutable object describing what to render, created using JSX or React.createElement. A React Component is a function or class that returns React Elements, enabling the creation of reusable UI pieces.

React node

A React Node is the most basic unit in the React rendering system. It can be a React element, a string, a number, a boolean, or null. Essentially, anything that can be rendered in React is a React Node.

const stringNode = 'Hello, world!';
const numberNode = 123;
const booleanNode = true;
const nullNode = null;
const elementNode = <div>Hello, world!</div>;

React element

A React Element is an immutable, plain object representing what you want to see on the screen. It includes the type (such as a string for HTML tags or a React component), props, and children. React elements are created using JSX syntax or React.createElement.

const element = <div className="greeting">Hello, world!</div>;

// Using React.createElement
const element = React.createElement(
  'div',
  { className: 'greeting' },
  'Hello, world!',
);

React component

A React Component is a reusable piece of the UI that can accept inputs (props) and returns React elements describing the UI. There are two types of components: function components and class components.

• Function components: These are simpler and are just functions that take props as an argument and return a React element.

  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }

• Class components: These are ES6 classes that extend React.Component and must have a render method returning a React element.

  class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }

Further reading

• React documentation: Render and commit
• React documentation: Passing Props to a Component
• React documentation: Writing Markup with JSX
• React documentation: State: A Component's Memory

TL;DR

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX makes it easier to create React components by allowing you to write what looks like HTML directly in your JavaScript code. Under the hood, JSX is transformed into JavaScript function calls, typically using a tool like Babel. For example, <div>Hello, world!</div> in JSX is transformed into React.createElement('div', null, 'Hello, world!').

What is JSX and how does it work?

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. JSX is primarily used with React to describe what the UI should look like.

How does JSX work?

JSX is not valid JavaScript by itself. It needs to be transformed into regular JavaScript before it can be executed by the browser. This transformation is usually done by a tool like Babel.

JSX syntax

JSX allows you to write HTML-like tags directly in your JavaScript code. For example:

const element = <h1>Hello, world!</h1>;

Transformation process

When you write JSX, it is transformed into JavaScript function calls. For example, the JSX code:

const element = <h1>Hello, world!</h1>;

is transformed into:

const element = React.createElement('h1', null, 'Hello, world!');

Embedding expressions

You can embed JavaScript expressions inside JSX using curly braces {}. For example:

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

Attributes in JSX

You can use quotes to specify string literals as attributes and curly braces to embed JavaScript expressions. For example:

const element = <img src={user.avatarUrl} alt="User Avatar" />;

JSX is an expression

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means you can use JSX inside if statements, for loops, and assign it to variables.

JSX prevents injection attacks

By default, React DOM escapes any values embedded in JSX before rendering them. This ensures that you can never inject anything that's not explicitly written in your application.

Further reading

• React JSX documentation
• Babel

TL;DR

The key prop in React is used to uniquely identify elements in a list. It helps React optimize rendering by efficiently updating and reordering elements. Without a unique key, React may re-render elements unnecessarily, leading to performance issues and bugs.

{
  items.map((item) => <ListItem key={item.id} value={item.value} />);
}

What is the purpose of the key prop in React?

Introduction

The key prop is a special attribute you need to include when creating lists of elements in React. It is crucial for helping React identify which items have changed, been added, or removed, thereby optimizing the rendering process.

Why key is important

1. Efficient updates: React uses the key prop to keep track of elements. When the state of a list changes, React can quickly determine which items need to be re-rendered, added, or removed.
2. Avoiding bugs: Without unique keys, React may re-render elements unnecessarily or incorrectly, leading to potential bugs in your application.
3. Performance optimization: By using unique keys, React minimizes the number of DOM operations, making your application faster and more efficient.

How to use the key prop

When rendering a list of elements, you should provide a unique key for each element. This key should be stable, meaning it should not change between renders. Typically, you can use a unique identifier from your data, such as an id.

const items = [
  { id: 1, value: 'Item 1' },
  { id: 2, value: 'Item 2' },
  { id: 3, value: 'Item 3' },
];

function ItemList() {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} value={item.value} />
      ))}
    </ul>
  );
}

function ListItem({ value }) {
  return <li>{value}</li>;
}

Common mistakes

1. Using array index as key: While it might be tempting to use the array index as the key, this is not recommended because the index can change if the list is reordered or items are added/removed.
2. Non-unique keys: Ensure that the keys are unique across the list. Duplicate keys can lead to unexpected behavior and bugs.

// Bad practice: using array index as key
{
  items.map((item, index) => <ListItem key={index} value={item.value} />);
}

// Good practice: using a unique identifier as key
{
  items.map((item) => <ListItem key={item.id} value={item.value} />);
}

Further reading

• React documentation on keys
• Why keys are important in React
• Preserving and Resetting State in React

TL;DR

Using array indices as the value for keys in React can lead to performance issues and bugs. When the order of items changes, React may not correctly identify which items have changed, leading to unnecessary re-renders or incorrect component updates. It's better to use unique identifiers for keys to ensure React can efficiently manage and update the DOM.

Consequence of using array indices as the value for keys in React

Performance issues

When array indices are used as keys, React may not efficiently update the DOM. If the order of items in the array changes, React will not be able to correctly identify which items have been added, removed, or moved. This can lead to unnecessary re-renders and decreased performance.

Incorrect component updates

Using array indices as keys can cause bugs in your application. For example, if the order of items changes, React may reuse the same component instances for different items, leading to incorrect state and props being passed to components. This can result in unexpected behavior and hard-to-debug issues.

Example

Consider the following example where array indices are used as keys:

const items = ['Item 1', 'Item 2', 'Item 3'];

const List = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

If the order of items changes, React may not correctly update the DOM, leading to performance issues and potential bugs.

Better approach

Instead of using array indices, use unique identifiers for keys. This ensures that React can efficiently manage and update the DOM.

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

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

In this example, using item.id as the key ensures that React can correctly identify and update items when the order changes.

Further reading

• React documentation on keys
• Why using array index as a key is an anti-pattern
• React performance optimization with keys

TL;DR

Controlled components in React are those where the form data is handled by the component's state. The state is the single source of truth, and any changes to the form input are managed through event handlers. Uncontrolled components, on the other hand, store their own state internally and rely on refs to access the form values. Controlled components offer more control and are easier to test, while uncontrolled components can be simpler to implement for basic use cases.

What is the difference between controlled and uncontrolled React components?

Controlled components

Controlled components are those where the form data is handled by the component's state. The state is the single source of truth, and any changes to the form input are managed through event handlers.

Example

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Uncontrolled components

Uncontrolled components store their own state internally and rely on refs to access the form values. This approach is more similar to traditional HTML form elements.

Example

class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.inputRef.current.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.inputRef} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Key differences

State management

• Controlled components: The state is managed by the React component.
• Uncontrolled components: The state is managed by the DOM.

Data flow

• Controlled components: Data flows from the component's state to the input element.
• Uncontrolled components: Data flows from the input element to the component via refs.

Use cases

• Controlled components: Preferred when you need to enforce validation, conditionally disable/enable inputs, or perform other complex interactions.
• Uncontrolled components: Useful for simple forms or when you need to integrate with non-React code.

Further reading

• React documentation on controlled and uncontrolled components
• React refs and the DOM

TL;DR

Using context in React can lead to performance issues if not managed properly. It can cause unnecessary re-renders of components that consume the context, even if the part of the context they use hasn't changed. Additionally, overusing context for state management can make the code harder to understand and maintain. It's important to use context sparingly and consider other state management solutions like Redux or Zustand for more complex state needs.

Pitfalls about using context in React

Performance issues

One of the main pitfalls of using context in React is the potential for performance issues. When the context value changes, all components that consume the context will re-render, even if they don't use the part of the context that changed. This can lead to unnecessary re-renders and degrade the performance of your application.

Example

const MyContext = React.createContext();

function ParentComponent() {
  const [value, setValue] = React.useState(0);

  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = React.useContext(MyContext);
  console.log('ChildComponent re-rendered');
  return <div>{value}</div>;
}

In this example, ChildComponent will re-render every time the value in ParentComponent changes, even if ChildComponent doesn't need to update.

Overusing context

Using context for state management can make the code harder to understand and maintain. Context is best suited for global state that doesn't change frequently, such as theme settings or user authentication status. Overusing context for more complex state management can lead to a tangled and hard-to-follow codebase.

Debugging difficulties

Debugging issues related to context can be challenging. Since context updates can trigger re-renders in multiple components, it can be difficult to trace the source of a bug or performance issue. This is especially true in larger applications with many context providers and consumers.

Lack of fine-grained control

Context provides a way to pass data through the component tree without having to pass props down manually at every level. However, it lacks fine-grained control over which components should re-render when the context value changes. This can lead to performance bottlenecks if not managed carefully.

Alternatives to context

For more complex state management needs, consider using other state management solutions like Redux, Zustand, or Recoil. These libraries provide more fine-grained control over state updates and can help avoid some of the pitfalls associated with using context.

Further reading

• React Context
• React memo Performance Optimization
• Redux
• Zustand
• Recoil

TL;DR

Hooks in React allow you to use state and other React features without writing a class. They make it easier to reuse stateful logic between components, improve code readability, and simplify the codebase by reducing the need for lifecycle methods. Hooks like useState and useEffect are commonly used to manage state and side effects in functional components.

Benefits of using hooks in React

Simplified state management

Hooks like useState allow you to add state to functional components without converting them to class components. This makes the code more concise and easier to read.

const [count, setCount] = useState(0);

Improved code readability

Hooks help in breaking down complex components into smaller, reusable pieces of logic. This makes the code more modular and easier to understand.

Reusable logic

Custom hooks allow you to extract and reuse stateful logic across multiple components. This promotes code reuse and reduces duplication.

function useCustomHook() {
  const [state, setState] = useState(initialState);
  // Custom logic here
  return [state, setState];
}

Reduced need for lifecycle methods

Hooks like useEffect can replace lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. This simplifies the component lifecycle management.

useEffect(() => {
  // Side effect logic here
  return () => {
    // Cleanup logic here
  };
}, [dependencies]);

Better separation of concerns

Hooks allow you to separate concerns by grouping related logic together. This makes the codebase more maintainable and easier to debug.

Enhanced testing

Functional components with hooks are generally easier to test compared to class components. Hooks can be tested in isolation, making unit tests more straightforward.

Further reading

• React Hooks documentation
• Using the State Hook
• Using the Effect Hook
• Building Your Own Hooks

TL;DR

React hooks have a few essential rules to ensure they work correctly. Always call hooks at the top level of your React function, never inside loops, conditions, or nested functions. Only call hooks from React function components or custom hooks. These rules ensure that hooks maintain the correct state and lifecycle behavior.

What are the rules of React hooks?

Always call hooks at the top level

Hooks should always be called at the top level of your React function. This means you should not call hooks inside loops, conditions, or nested functions. This rule ensures that hooks are called in the same order each time a component renders, which is crucial for maintaining the correct state and lifecycle behavior.

// Correct
function MyComponent() {
  const [count, setCount] = useState(0);

  if (count > 0) {
    // Do something
  }
}

// Incorrect
function MyComponent() {
  if (someCondition) {
    const [count, setCount] = useState(0); // This will break the rules of hooks
  }
}

Only call hooks from React function components or custom hooks

Hooks should only be called from React function components or custom hooks. This rule ensures that hooks are used in the appropriate context where React can manage their state and lifecycle.

// Correct
function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

// Correct (custom hook)
function useCustomHook() {
  const [state, setState] = useState(null);
  return [state, setState];
}

// Incorrect
function regularFunction() {
  const [count, setCount] = useState(0); // This will break the rules of hooks
}

Use the eslint-plugin-react-hooks linter

To enforce these rules, you can use the eslint-plugin-react-hooks linter. This plugin will help you identify and fix violations of the rules of hooks in your code.

npm install eslint-plugin-react-hooks --save-dev

Add the plugin to your ESLint configuration:

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error", // Checks rules of hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

Further reading

• React hooks documentation
• Rules of hooks
• Using the eslint-plugin-react-hooks linter

TL;DR

useEffect and useLayoutEffect are React hooks used to handle side effects in functional components, but they differ in timing and use cases:

• useEffect: Runs asynchronously after the DOM has been painted. It is suitable for tasks like data fetching, subscriptions, or logging.
• useLayoutEffect: Runs synchronously after DOM mutations but before the browser paints. Use it for tasks like measuring DOM elements or synchronizing the UI with the DOM.

Code example:

import React, { useEffect, useLayoutEffect, useRef } from 'react';

function Example() {
  const ref = useRef();

  useEffect(() => {
    console.log('useEffect: Runs after DOM paint');
  });

  useLayoutEffect(() => {
    console.log('useLayoutEffect: Runs before DOM paint');
    console.log('Element width:', ref.current.offsetWidth);
  });

  return <div ref={ref}>Hello</div>;
}

What is useEffect?

useEffect is a React hook used for managing side effects in functional components. Side effects include operations like fetching data, updating a subscription, or interacting with the browser's DOM API.

• It runs asynchronously after the DOM has been updated and painted.
• It does not block the browser from updating the UI.
• By default, it runs after every render, but dependencies can control its execution.

Code example

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Component mounted or updated');
    return () => console.log('Cleanup on unmount or dependency change');
  }, []); // Runs only on mount and unmount

  return <div>Hello, World!</div>;
}

Common use cases

• Fetching data from an API
• Setting up subscriptions (e.g., WebSocket connections)
• Logging or analytics tracking
• Adding and removing event listeners

What is useLayoutEffect?

useLayoutEffect is a React hook similar to useEffect, but it differs in timing. It runs synchronously after DOM mutations and before the browser paints the screen.

• It is suitable for tasks where the DOM needs to be accessed before the paint.
• It can block rendering, so it should be used sparingly.

Code example

import React, { useLayoutEffect, useRef } from 'react';

function Example() {
  const ref = useRef();

  useLayoutEffect(() => {
    console.log('Element dimensions:', ref.current.getBoundingClientRect());
  });

  return <div ref={ref}>Hello</div>;
}

Common use cases

• Measuring DOM elements (e.g., for animations or layouts)
• Adjusting DOM properties or styles based on calculations
• Fixing UI synchronization issues

key differences between useEffect and useLayoutEffect

Timing

• useEffect: Executes after the browser has painted the UI.
• useLayoutEffect: Executes before the browser paints, right after DOM changes.

Blocking behavior

• useEffect: Non-blocking, runs asynchronously.
• useLayoutEffect: Blocking, runs synchronously.

Use case examples

• useEffect: Fetching data, updating state, or adding event listeners.
• useLayoutEffect: Measuring DOM elements, managing animations, or solving layout issues.

Further reading

• React Hooks documentation
• React useEffect API documentation
• React useLayoutEffect API documentation
• Differences between useEffect and useLayoutEffect

TL;DR

The callback function argument format of setState() in React is used to ensure that state updates are based on the most recent state and props. This is particularly important when the new state depends on the previous state. Instead of passing an object directly to setState(), you pass a function that takes the previous state and props as arguments and returns the new state.

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment,
}));

Purpose of callback function argument format of setState() in React

Ensuring state updates are based on the most recent state

React's setState() is asynchronous, meaning multiple calls to setState() can be batched together for performance reasons. If you rely on the current state to compute the next state, using the callback function format ensures that you are working with the most up-to-date state.

Syntax

The callback function format of setState() takes a function as an argument. This function receives two parameters: prevState and props. It returns an object representing the new state.

this.setState((prevState, props) => {
  return {
    counter: prevState.counter + props.increment,
  };
});

When to use it

• When the new state depends on the previous state: If you need to update the state based on the current state, use the callback function format to avoid potential issues with asynchronous state updates.
• When multiple state updates are batched: In scenarios where multiple setState() calls might be batched together, using the callback function ensures that each update is based on the most recent state.

Example

Consider a counter component where the state update depends on the previous state:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  incrementCounter = () => {
    this.setState((prevState, props) => ({
      counter: prevState.counter + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <button onClick={this.incrementCounter}>Increment</button>
      </div>
    );
  }
}

In this example, using the callback function format ensures that the counter state is correctly incremented, even if multiple incrementCounter calls are made in quick succession.

Further reading

• React Docs: State: A Component's Memory
• React Docs: setState()
• React Docs: Responding to Events

TL;DR

The dependency array of useEffect determines when the effect should re-run. If the array is empty, the effect runs only once after the initial render. If it contains variables, the effect runs whenever any of those variables change. If omitted, the effect runs after every render.

What does the dependency array of useEffect affect?

Introduction to useEffect

The useEffect hook in React is used to perform side effects in functional components. These side effects can include data fetching, subscriptions, or manually changing the DOM. The useEffect hook takes two arguments: a function that contains the side effect logic and an optional dependency array.

Dependency array

The dependency array is the second argument to the useEffect hook. It is an array of values that the effect depends on. React uses this array to determine when to re-run the effect.

useEffect(() => {
  // Side effect logic here
}, [dependency1, dependency2]);

How the dependency array affects useEffect

1. Empty dependency array ([]):

   • The effect runs only once after the initial render.
   • This is similar to the behavior of componentDidMount in class components.

   useEffect(() => {
     // This code runs only once after the initial render
   }, []);

2. Dependency array with variables:

   • The effect runs after the initial render and whenever any of the specified dependencies change.
   • React performs a shallow comparison of the dependencies to determine if they have changed.

   useEffect(() => {
     // This code runs after the initial render and whenever dependency1 or dependency2 changes
   }, [dependency1, dependency2]);

3. No dependency array:

   • The effect runs after every render.
   • This can lead to performance issues if the effect is expensive.

   useEffect(() => {
     // This code runs after every render
   });

Common pitfalls

1. Stale closures:

   • If you use state or props inside the effect without including them in the dependency array, you might end up with stale values.
   • Always include all state and props that the effect depends on in the dependency array.

   const [count, setCount] = useState(0);
   
   useEffect(() => {
     const handle = setInterval(() => {
       console.log(count); // This might log stale values if `count` is not in the dependency array
     }, 1000);
   
     return () => clearInterval(handle);
   }, [count]); // Ensure `count` is included in the dependency array

2. Functions as dependencies:

   • Functions are recreated on every render, so including them in the dependency array can cause the effect to run more often than necessary.
   • Use useCallback to memoize functions if they need to be included in the dependency array.

   const handleClick = useCallback(() => {
     // Handle click
   }, []);
   
   useEffect(() => {
     // This effect will not re-run unnecessarily because `handleClick` is memoized
   }, [handleClick]);

Further reading

• React Docs: Using the Effect Hook
• React Docs: Rules of Hooks
• Overreacted: A Complete Guide to useEffect

TL;DR

The useRef hook in React is used to create a mutable object that persists across renders. It can be used to access and manipulate DOM elements directly, store mutable values that do not cause re-renders when updated, and keep a reference to a value without triggering a re-render. For example, you can use useRef to focus an input element:

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  useEffect(() => {
    inputEl.current.focus();
  }, []);

  return <input ref={inputEl} type="text" />;
}

What is the useRef hook in React and when should it be used?

Introduction to useRef

The useRef hook in React is a function that returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

Key use cases for useRef

Accessing and manipulating DOM elements

One of the primary use cases for useRef is to directly access and manipulate DOM elements. This is particularly useful when you need to interact with the DOM in ways that are not easily achievable through React's declarative approach.

Example:

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  useEffect(() => {
    inputEl.current.focus();
  }, []);

  return <input ref={inputEl} type="text" />;
}

In this example, the useRef hook is used to create a reference to the input element, and the useEffect hook is used to focus the input element when the component mounts.

Storing mutable values

useRef can also be used to store mutable values that do not cause a re-render when updated. This is useful for keeping track of values that change over time but do not need to trigger a re-render.

Example:

import React, { useRef } from 'react';

function Timer() {
  const count = useRef(0);

  const increment = () => {
    count.current += 1;
    console.log(count.current);
  };

  return <button onClick={increment}>Increment</button>;
}

In this example, the count variable is stored in a useRef object, and its value is incremented without causing the component to re-render.

Keeping a reference to a value

useRef can be used to keep a reference to a value without triggering a re-render. This is useful for storing values that need to persist across renders but do not need to cause a re-render when they change.

Example:

import React, { useRef, useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <h1>Now: {count}</h1>
      <h2>Before: {prevCountRef.current}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, prevCountRef is used to keep a reference to the previous value of count without causing a re-render.

Further reading

• React documentation on useRef
• Using the useRef hook

TL;DR

The useCallback hook in React is used to memoize functions, preventing them from being recreated on every render. This is particularly useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders. You should use useCallback when you have a function that is passed as a prop to a child component and you want to avoid the child component re-rendering unnecessarily.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

What is the useCallback hook in React and when should it be used?

What is useCallback?

The useCallback hook is a React hook that returns a memoized version of the callback function that only changes if one of the dependencies has changed. It is useful for optimizing performance by preventing unnecessary re-creations of functions.

Syntax

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

When should useCallback be used?

Preventing unnecessary re-renders

When you pass a function as a prop to a child component, the child component may re-render every time the parent component re-renders, even if the function itself hasn't changed. Using useCallback ensures that the function reference remains the same as long as its dependencies haven't changed, thus preventing unnecessary re-renders.

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return <ChildComponent onClick={handleClick} />;
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click me</button>;
});

Optimizing performance

In complex applications, re-creating functions on every render can be costly in terms of performance. By using useCallback, you can avoid this overhead and make your application more efficient.

Caveats

• Overuse: Overusing useCallback can lead to more complex code and may not always result in performance improvements. It should be used judiciously.
• Dependencies: Ensure that all dependencies are correctly specified in the dependency array. Missing dependencies can lead to stale closures and bugs.

Further reading

• React documentation on useCallback
• React memoization techniques
• Understanding React's useCallback and useMemo

TL;DR

The useMemo hook in React is used to memoize expensive calculations so that they are only recomputed when one of the dependencies has changed. This can improve performance by avoiding unnecessary recalculations. You should use useMemo when you have a computationally expensive function that doesn't need to run on every render.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

What is the useMemo hook in React and when should it be used?

What is useMemo?

The useMemo hook is a built-in React hook that allows you to memoize the result of a function. This means that the function will only be re-executed when one of its dependencies changes. The primary purpose of useMemo is to optimize performance by preventing unnecessary recalculations.

Syntax

The syntax for useMemo is as follows:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• The first argument is a function that returns the value you want to memoize.
• The second argument is an array of dependencies. The memoized value will only be recomputed when one of these dependencies changes.

When should it be used?

Expensive calculations

If you have a function that performs a computationally expensive calculation, you can use useMemo to ensure that this calculation is only performed when necessary.

const expensiveCalculation = (num) => {
  // Some expensive calculation
  return num * 2;
};

const MyComponent = ({ number }) => {
  const memoizedValue = useMemo(() => expensiveCalculation(number), [number]);

  return <div>{memoizedValue}</div>;
};

Avoiding unnecessary renders

useMemo can also be useful for avoiding unnecessary renders of child components. If a child component depends on a value that is expensive to compute, you can use useMemo to ensure that the value is only recomputed when necessary.

const MyComponent = ({ items }) => {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a - b);
  }, [items]);

  return <ChildComponent sortedItems={sortedItems} />;
};

Caveats

• Overuse: Overusing useMemo can lead to more complex code without significant performance benefits. It should be used judiciously.
• Dependencies: Make sure to correctly specify all dependencies. Missing dependencies can lead to stale values, while extra dependencies can lead to unnecessary recalculations.

Further reading

• React documentation on useMemo
• When to useMemo and useCallback by Kent C. Dodds

TL;DR

The useReducer hook in React is used for managing complex state logic in functional components. It is an alternative to useState and is particularly useful when the state has multiple sub-values or when the next state depends on the previous one. It takes a reducer function and an initial state as arguments and returns the current state and a dispatch function.

const [state, dispatch] = useReducer(reducer, initialState);

Use useReducer when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.

What is the useReducer hook in React and when should it be used?

Introduction to useReducer

The useReducer hook is a React hook that is used for managing state in functional components. It is an alternative to the useState hook and is particularly useful for managing more complex state logic. The useReducer hook is similar to the reduce function in JavaScript arrays, where you have a reducer function that determines how the state should change in response to actions.

Syntax

The useReducer hook takes two arguments: a reducer function and an initial state. It returns an array with the current state and a dispatch function.

const [state, dispatch] = useReducer(reducer, initialState);

Reducer function

The reducer function is a pure function that takes the current state and an action as arguments and returns the new state. The action is an object that typically has a type property and an optional payload.

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

Example usage

Here is a simple example of using useReducer to manage a counter state:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

When to use useReducer

• Complex state logic: Use useReducer when you have complex state logic that involves multiple sub-values or when the next state depends on the previous state.
• State management: It is useful when you need a more predictable state management pattern, similar to Redux.
• Performance optimization: useReducer can help optimize performance in certain scenarios by avoiding unnecessary re-renders.

Further reading

• React documentation on useReducer
• Using the useReducer hook

TL;DR

The useId hook in React is used to generate unique IDs for elements within a component. This is particularly useful for accessibility purposes, such as linking form inputs with their labels. It ensures that IDs are unique across the entire application, even if the component is rendered multiple times.

import { useId } from 'react';

function MyComponent() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
}

What is the useId hook in React and when should it be used?

Introduction to useId

The useId hook is a built-in React hook introduced in React 18. It is designed to generate unique IDs that can be used within a component. This is particularly useful for ensuring that IDs are unique across the entire application, even if the component is rendered multiple times.

When to use useId

Accessibility

One of the primary use cases for useId is to improve accessibility. For example, when creating form elements, it is important to link labels to their corresponding inputs using the htmlFor attribute on the label and the id attribute on the input. The useId hook ensures that these IDs are unique, preventing any potential conflicts.

import { useId } from 'react';

function MyComponent() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
}

Dynamic components

When you have components that are rendered dynamically or multiple times, using useId ensures that each instance of the component has a unique ID. This can prevent issues where multiple elements end up with the same ID, which can cause problems with accessibility and JavaScript behavior.

import { useId } from 'react';

function DynamicComponent() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Dynamic Input:</label>
      <input id={id} type="text" />
    </div>
  );
}

function App() {
  return (
    <div>
      <DynamicComponent />
      <DynamicComponent />
    </div>
  );
}

How useId works

The useId hook generates a unique string that can be used as an ID. This string is unique across the entire application, ensuring that there are no conflicts even if the component is rendered multiple times. The hook does not take any arguments and returns a string.

import { useId } from 'react';

function ExampleComponent() {
  const id = useId();
  console.log(id); // Outputs a unique ID string
  return <div id={id}>Unique ID Component</div>;
}

Best practices

• Use for accessibility: Always use useId when linking labels to inputs to ensure accessibility.
• Avoid hardcoding IDs: Instead of hardcoding IDs, use useId to generate them dynamically.
• Consistent usage: Use useId consistently across your application to avoid ID conflicts.

Further reading

• React documentation on useId
• MDN Web Docs on accessibility
• React 18 release notes

TL;DR

React Fragments are used to group multiple elements without adding extra nodes to the DOM. This is useful when you want to return multiple elements from a component's render method without wrapping them in an additional HTML element. You can use the shorthand syntax <>...</> or the React.Fragment syntax.

return (
  <>
    <ChildComponent1 />
    <ChildComponent2 />
  </>
);

What are React Fragments used for?

Grouping multiple elements

React Fragments allow you to group multiple elements without adding extra nodes to the DOM. This is particularly useful when you want to return multiple elements from a component's render method but don't want to introduce unnecessary wrapper elements.

Avoiding unnecessary DOM nodes

Using React Fragments helps in avoiding unnecessary DOM nodes, which can be beneficial for performance and maintaining a cleaner DOM structure. This is especially important in complex applications where additional nodes can lead to increased memory usage and slower rendering times.

Syntax

There are two ways to use React Fragments:

1. Shorthand syntax: This is the most concise way to use fragments. It uses empty tags <>...</>.

   return (
     <>
       <ChildComponent1 />
       <ChildComponent2 />
     </>
   );

2. Full syntax: This uses React.Fragment and can be useful if you need to add keys to the fragment.

   return (
     <React.Fragment>
       <ChildComponent1 />
       <ChildComponent2 />
     </React.Fragment>
   );

Adding keys to fragments

If you need to add keys to the elements within a fragment, you must use the full React.Fragment syntax. This is useful when rendering a list of elements.

return (
  <>
    {items.map((item) => (
      <React.Fragment key={item.id}>
        <ChildComponent />
      </React.Fragment>
    ))}
  </>
);

Use cases

• Returning multiple elements from a component: When a component needs to return multiple sibling elements, using a fragment can help avoid unnecessary wrapper elements.
• Rendering lists: When rendering a list of elements, fragments can be used to group the list items without adding extra nodes to the DOM.
• Conditional rendering: When conditionally rendering multiple elements, fragments can help keep the DOM structure clean.

Further reading

• React Fragments - Official Documentation

TL;DR

forwardRef() in React is used to pass a ref through a component to one of its child components. This is useful when you need to access a DOM element or a child component's instance directly from a parent component. You wrap your functional component with forwardRef() and use the ref parameter to forward the ref to the desired child element.

import React, { forwardRef } from 'react';

const MyComponent = forwardRef((props, ref) => <input ref={ref} {...props} />);

What is forwardRef() in React used for?

Introduction

In React, forwardRef() is a higher-order function that allows you to forward a ref through a component to one of its child components. This is particularly useful when you need to access a DOM element or a child component's instance directly from a parent component.

Why use forwardRef()?

There are several scenarios where forwardRef() is beneficial:

• Accessing DOM elements: When you need to manipulate a DOM element directly, such as focusing an input field.
• Interacting with child components: When you need to call methods or access properties of a child component instance.

How to use forwardRef()

To use forwardRef(), you wrap your functional component with it and use the ref parameter to forward the ref to the desired child element.

Example

Here is a simple example demonstrating how to use forwardRef():

import React, { forwardRef, useRef } from 'react';

// Define a functional component and wrap it with forwardRef
const MyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);

const ParentComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    // Access the input element and focus it
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <MyInput ref={inputRef} placeholder="Type here..." />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

In this example:

1. MyInput is a functional component wrapped with forwardRef().
2. The ref parameter is forwarded to the input element inside MyInput.
3. In ParentComponent, a ref (inputRef) is created using useRef().
4. The inputRef is passed to MyInput, allowing the parent component to access the input element directly.
5. The focusInput function uses the ref to focus the input element when the button is clicked.

Important considerations

• Functional components only: forwardRef() is used with functional components. Class components can directly use refs without forwardRef().
• Ref forwarding: Ensure that the ref is forwarded to a DOM element or a class component instance, not another functional component.

Further reading

• React documentation on forwardRef()
• Using the useRef Hook
• Refs and the DOM

TL;DR

To reset a component's state in React, you can set the state back to its initial value. This can be done by defining an initial state and then using the setState function to reset it. For example, if you have a state object like this:

const [state, setState] = useState(initialState);

You can reset it by calling:

setState(initialState);

How do you reset a component's state in React?

Using functional components with hooks

In functional components, you can use the useState hook to manage state. To reset the state, you can simply call the setState function with the initial state value.

Example

import React, { useState } from 'react';

const MyComponent = () => {
  const initialState = { count: 0, text: '' };
  const [state, setState] = useState(initialState);

  const resetState = () => {
    setState(initialState);
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Text: {state.text}</p>
      <button onClick={resetState}>Reset</button>
    </div>
  );
};

export default MyComponent;

Using class components

In class components, you can reset the state by calling this.setState with the initial state value.

Example

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.initialState = { count: 0, text: '' };
    this.state = this.initialState;
  }

  resetState = () => {
    this.setState(this.initialState);
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <p>Text: {this.state.text}</p>
        <button onClick={this.resetState}>Reset</button>
      </div>
    );
  }
}

export default MyComponent;

Using a function to generate initial state

Sometimes, the initial state might be derived from props or other dynamic sources. In such cases, you can use a function to generate the initial state.

Example

import React, { useState } from 'react';

const MyComponent = (props) => {
  const getInitialState = () => ({ count: props.initialCount, text: '' });
  const [state, setState] = useState(getInitialState);

  const resetState = () => {
    setState(getInitialState());
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Text: {state.text}</p>
      <button onClick={resetState}>Reset</button>
    </div>
  );
};

export default MyComponent;

Further reading

• React useState Hook
• React Component State
• React Functional Components

TL;DR

Error boundaries in React are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole application. They are implemented using the componentDidCatch lifecycle method and the static getDerivedStateFromError method. Error boundaries do not catch errors inside event handlers, asynchronous code, or server-side rendering.

What are error boundaries in React for?

Introduction

Error boundaries are a feature in React that help manage and handle errors in a more graceful way. They allow developers to catch JavaScript errors anywhere in their component tree, log those errors, and display a fallback UI instead of crashing the entire application.

How to implement error boundaries

To create an error boundary, you need to define a class component that implements either or both of the following lifecycle methods:

• static getDerivedStateFromError(error): This method is used to update the state so the next render will show the fallback UI.
• componentDidCatch(error, info): This method is used to log error information.

Here is an example of an error boundary component:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render shows the fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error('Error caught by ErrorBoundary: ', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;