Error: Maximum update depth exceeded. Component calls setState inside useEffect,..., or one of the d-CodePudding

I have error like in title. But I don't know how my dependencie change every render because it is in useEffect. I suspected it was related to the map function so I moved it higher in the hierarchy to "injectEndpoints"->"transformResponse" but that didn't help. I don't know how to change it or maybe that's not the point?

export const parametersApi = myApi
  .injectEndpoints({
    endpoints: (builder) => ({
      getParameters: builder.query<
        ExtendedParameter[],
        string
      >({
        query: (id) =>
          `/${id}/parameters`,
        providesTags: (_result, _error, id) => [
          {
            type: `Parameters`,
            id: `PLIST_${id}`,
          },
        ],
        transformResponse: (response: parameter[]) => {
          return response.map((param) => {
            return { id: param.name, ...param };
          });
        },
      }),

....
export const {
  useGetParametersQuery } = parametersApi;

The file in which the error occurs:

  const selectedParameters =
    useGetParametersQuery(master.id, {
      skip: !master,
    }).data || [];
...
  useEffect(() => {
    console.log("selectedParameters", selectedParameters);
    setParameters(selectedParameters);
  }, [selectedParameters]);

console.log("selectedParameters", selectedParameters);

CodePudding user response：

 || []

creates a new array every render while there is no .data yet - so selectedParameters will be a new reference and trigger an useEffect every time.

Do something like const EMPTY_ARR = [] outside your component and do || EMPTY_ARR to keep a stable reference here.