Why dispatch(actionObject) is called inside a anonymous arrow function?

Question

Below is a simple ToDo-List Code by using useReducer().

I am trying to toggle the check box. Although Code is working

concept wise I am not able to understand why dispatch function is being called inside an anonymous arrow function ?

import initialTodos from "./Data";
import { useReducer } from "react";


const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

export default function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => dispatch({ type: "COMPLETE", id: todo.id });} // dispatch(actionObject);
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

score 0 · Answer 1 · answered Oct 03 '22 at 12:29

0

In order to subscribe to any changes on the input, you need to provide the onChange event a callback function to call when the event occurs. One way of doing that is by passing an anonymous function.

answered Oct 03 '22 at 12:29

rantao

1,621
4
14
34

score 0 · Answer 2 · answered Oct 03 '22 at 12:29

It's because, we don't have to call them, React calls it when the event is triggered.

just onChange = {dispatch()} would trigger dispatch immediately during rendering which you don't want ..

for more info read about events in docs

and the arrow function is just for less typing ...

Why dispatch(actionObject) is called inside a anonymous arrow function?

2 Answers2