useStateへsliceした配列を渡すと Maximum update depth exceeded. のエラーが表示される

Question

前提・実現したいこと

hooksのuseStateに関して、
状態へ引数を渡す際にsliceを使った引数だとMaximum update depth exceeded.のエラーになります。sliceを使わない場合はそのまま動きます。

発生している問題・エラーメッセージ

エラーメッセージ
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

slice前とslice後の配列データはどちらも同じ型を持っています。
エラーメッセージの通り処理回数が多すぎるせいですがslice程度の処理でもそうなるの？と疑問に思い別の理由もあるのか知りたいです。

該当のソースコード

const ElementContainer: FC = () => {
  const [genre, setGenre] = useState('all');
  const [foodStuff, setFoodStuff] = useState(foodStuffDataB);

  //????質問該当の関数です
  const foodStuffFunc: foodStuffFuncType = {
    getStuffData: (genre: string) : foodStuffType[] => {
      const sortData = foodStuffDataB.sort((sortA: any, sortB: any) => {
          return sortA.VitaminC < sortB.VitaminC ? 1 : -1;
      });
      //ここでsliceした変数をsetFoodStuffに使うとエラーが表示されます。
      const dataSliced: foodStuffType[] = sortData.slice(0,9);

      setGenre(genre);
      //setFoodStuffにsliceした変数を引数とした場合のみエラーが出ます
      setFoodStuff(dataSliced);
      return sortData;
    },
    genre: genre,
    foodStuff: foodStuff,
  }
  const { pathname } = useLocation();
  const matchedPath: any = pathname.match(//elm/(.+)/),
    pathId: string = matchedPath[1];
  const nutoritionMsg: string = nutoritionData(pathId);

  return <Element nutoritionMsg={nutoritionMsg} pathId={pathId} foodStuffFunc={foodStuffFunc} />;
}
export default ElementContainer;

追記：他に必要なソースがあれば教えていただければと思います。

Answer 1

バケツリレーでstateを回すことを辞めて孫コンポーネントにuseState（useReducerも）を置いてエラーを逃れました
useContextを使うべきだったとこかもしれませんがとりあえず今回はこのまま進めてみます！

Answer 2

render内でsetStateをしようとするとこのエラーになります。

// 問題があると思う箇所
return <Element nutoritionMsg={nutoritionMsg} pathId={pathId} foodStuffFunc={foodStuffFunc} />;

// 修正例
return (
    <Element 
        nutoritionMsg={nutoritionMsg}
        pathId={pathId} 
        foodStuffFunc={()=> foodStuffFunc()}
    />;
)

これで、どうでしょう？

Comments

[moimoi_sushi]

遅くなってすみません
useStateを孫コンポーネント側に配置することでなんとか誤魔化しました汗