REFERENCEreact

react Documentation

📖 INDEX

# what-is-react

# functional-components

# class-components

# jsx-structure

# component-rendering

# componentwillunmount

# controlled-vs-uncontrolled

# form-validation

# formik

# react-hook-form

# conditional-rendering-with-if-else

# ternary-operator

# logical-operator-and

# conditional-component-rendering

# react-testing-library

# component-testing

# hooks-testing

LOADING ENGINE...

useDispatch

AI & DATA SCIENCE // usedispatch

useDispatch is the react-redux hook that returns the store's dispatch function, used to send actions that trigger state updates through the reducers.

Syntax

const dispatch = useDispatch();
dispatch({ type: 'ACTION_TYPE', payload: data });

Deep Dive Course

Calling useDispatch() returns a reference to the exact same dispatch function belonging to the store the app's Provider is wrapping, letting any component trigger a Redux state update by dispatching a plain action object, which the store then routes through the root reducer to compute the new state. Combined with action creator functions, plain functions that construct and return properly-shaped action objects, dispatch(actionCreator(someArgument)) is the standard, idiomatic pattern for triggering Redux updates from event handlers or effects inside components.

1Understanding useDispatch

💡

Wrap action creation in a plain action-creator function, like addTodo(text), rather than manually constructing the action object with the correct type and payload shape inline at every dispatch call site — it keeps the action's exact shape defined in one place and reduces the chance of typos in the type string.

editor.html

import { useDispatch } from 'react-redux';

function IncrementButton() {
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: 'increment' })}>+1</button>;
}

localhost:3000

2Practical Example

Here is a real-world application of useDispatch showing how it is used in production React code.

editor.html

import { useDispatch } from 'react-redux';

const addTodo = (text) => ({ type: 'todos/add', payload: { text, done: false } });

function AddTodoForm() {
  const dispatch = useDispatch();
  const handleAdd = () => dispatch(addTodo('Buy milk'));
  return <button onClick={handleAdd}>Add Todo</button>;
}

localhost:3000

3Best Practices

Follow these guidelines when working with useDispatch:

1. Use action creator functions to construct properly-shaped action objects, then pass their result to dispatch(), rather than writing out the action object shape inline at every call site

2. Call dispatch() from event handlers or effects in response to user interaction or other triggers, letting the reducer decide exactly how that action transforms the state

3. Avoid dispatching an action synchronously and unconditionally inside a component's render body, since dispatch triggers a state update, and doing so during render can create an infinite update loop

⚠️

Tip: Wrap action creation in a plain action-creator function, like addTodo(text), rather than manually constructing the action object with the correct type and payload shape inline at every dispatch call site — it keeps the action's exact shape defined in one place and reduces the chance of typos in the type string.

editor.html

import { useDispatch } from 'react-redux';

function IncrementButton() {
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: 'increment' })}>+1</button>;
}

localhost:3000

Examples

Example 01Basic Usage

import { useDispatch } from 'react-redux';

function IncrementButton() {
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: 'increment' })}>+1</button>;
}

Example 02Advanced Example

import { useDispatch } from 'react-redux';

const addTodo = (text) => ({ type: 'todos/add', payload: { text, done: false } });

function AddTodoForm() {
  const dispatch = useDispatch();
  const handleAdd = () => dispatch(addTodo('Buy milk'));
  return <button onClick={handleAdd}>Add Todo</button>;
}

Best Practices

Use action creator functions to construct properly-shaped action objects, then pass their result to dispatch(), rather than writing out the action object shape inline at every call site
Call dispatch() from event handlers or effects in response to user interaction or other triggers, letting the reducer decide exactly how that action transforms the state
Avoid dispatching an action synchronously and unconditionally inside a component's render body, since dispatch triggers a state update, and doing so during render can create an infinite update loop

Interview Question

Why is dispatching an action directly and unconditionally inside a component's render body considered a serious bug, rather than just an inefficiency?▼

Hint: Think about what dispatch() actually triggers, and whether calling it every single time a component renders could ever stop on its own.

Calling dispatch() triggers a state update through the reducer, and any state update that a component actually reads, directly or indirectly, will in turn cause that component to re-render once the updated state flows back to it — if dispatch() were called unconditionally every single time the component's render body executes, each resulting re-render would itself call dispatch() again, immediately triggering yet another re-render, forming a genuine infinite loop with no natural point where it would ever stop on its own, rather than settling into some final, repeated state. This is precisely why dispatching an action belongs inside an event handler, responding to a specific one-time user interaction like a click, or inside a properly-guarded useEffect with an appropriate dependency array, both of which run only in response to a specific, bounded trigger rather than unconditionally on every single render pass.

Exercises

MediumPractice using useDispatch in a real scenario.

View Solution

import { useDispatch } from 'react-redux';

function IncrementButton() {
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: 'increment' })}>+1</button>;
}

Frequently Asked Questions

Why is dispatching an action directly and unconditionally inside a component's render body considered a serious bug, rather than just an inefficiency?▼

Related Functions

useselectoractionsstore