Too many re-renders. React limits the number of renders to prevent an infinite loop の対応

React Redux

やりたいこと

  • エラーを消す
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

stackoverflow.com

エラーが発生する

import React, { useState } from 'react';

const AppTableRow = (props) => {
  const [data, setData] = useState(props);

  const handleChenge = () => {
    const obj = {/* 何らかのデータ */ };
    setData(obj);
  };

  return (
    <div id={data.id}>
      <!-- 何らかのHTML -->
      <button type="button" onClick={handleChenge()}>Button</button>
    </div>
  );
};

エラーが消える

import React, { useState } from 'react';

const AppTableRow = (props) => {
  const [data, setData] = useState(props);

  const handleChenge = () => {
//    const obj = {/* 何らかのデータ */ };
//    setData(obj);
  };

  return (
    <div id={data.id}>
      <!-- 何らかのHTML -->
      <button type="button" onClick={handleChenge()}>Button</button>
    </div>
  );
};

stackoverflowのコメントによれば、関数コンポーネントの内側でステートセッター(setData)を呼び出していることにより、 Reactは関数を再度呼び出し、無限ループに陥っているらしい。 いまいちエラーの対応と原因について正しく認識できていないが、とりあえずメモ。