Cannot update a component while rendering a different component warning (problem with redux) using useAppSelector to get value on Layout component [duplicate]

Question

Hi, I'm currently new to NextJS. The issue I'm facing is having the same warning as the above link issue but my problem occurs with the Redux store instead (I'm using the redux tool kit). The warning point out that the problem occurs here

const requestNumber = useAppSelector((state) => state.createRequest.requestNumber) ?? '';

const userInfo: User | undefined = useAppSelector( (state) => state.auth.userInfo );

here is my code

const CreateLayout = ({ children }: { children: React.ReactNode }) => {
  const { Content } = Layout;
  // const selectedBrandName = useAppSelector((state) => state.createRequest.name);
  const router = useRouter();
  const dispatch = useAppDispatch();
  const spinOn = useAppSelector((state) => state.createRequest.spinOn);
  const requestNumber =
    useAppSelector((state) => state.createRequest.requestNumber) ?? '';
  const userInfo: User | undefined = useAppSelector(
    (state) => state.auth.userInfo
  );

  const response = useGetCreateRequestInfo({
    params: {
      // requestNumber: requestNumber,
      requestNumber: '#130',
      tenant: process.env.NEXT_PUBLIC_DOMAIN ?? '',
      userId: userInfo?.id ?? '',
    },
    options: {
      refreshInterval: 10000,
    },
  });
  if (response.data?.data) {
    dispatch(setCreateRequestData(response.data.data));
  }
  return (
    <Layout className="bg-white">
      <section className="flex flex-row gap-[12px] border-b-[#E4E8ED] border-[1px] p-[16px]">
        <LeftOutlined
          onClick={() => {
            dispatch(setDataImageOtherUpload({}));
            dispatch(setDataImageUpload({}));
            router.back();
          }}
        />
        <div className="text-[16px] leading-[24px] font-[500] flex flex-col">
          <div>Create New Request</div>
          <div className="text-[12px] leading-[16px] font-[400] truncate w-[120px]">
            {response.data?.data?.insuranceDetail.note}
          </div>
        </div>
      </section>
      <Content>{children}</Content>
      {spinOn && (
        <Spin className="absolute w-full h-screen flex items-center justify-center backdrop-blur-sm bg-white/30" />
      )}
    </Layout>
  );
};

export default CreateLayout;

appreciated any help, thanks for reading

Md Rasheduzzaman · Accepted Answer · 2023-10-09 03:19:37Z

-1

You should move the dispatching of actions outside the rendering phase. You can use the useEffect hook to perform side effects like dispatching actions once the component has mounted.

import { useEffect } from 'react';

const CreateLayout = ({ children }: { children: React.ReactNode }) => {
  // ... other component code ...

  const response = useGetCreateRequestInfo({
    params: {
      requestNumber: '#130',
      tenant: process.env.NEXT_PUBLIC_DOMAIN ?? '',
      userId: userInfo?.id ?? '',
    },
    options: {
      refreshInterval: 10000,
    },
  });

  useEffect(() => {
    if (response.data?.data) {
      dispatch(setCreateRequestData(response.data.data));
    }
  }, [response.data, dispatch]);

  return (
    // ... rest of your component ...
  );
};

export default CreateLayout;

answered Oct 9, 2023 at 3:19

Md Rasheduzzaman

1

Sign up to request clarification or add additional context in comments.

1 Comment

Kai Over a year ago

thanks for the comment but the only thing that makes me confuse is this warning occurs when I try to get the value from the redux store using useAppSelector, not with dispatch

Collectives™ on Stack Overflow

Cannot update a component while rendering a different component warning (problem with redux) using useAppSelector to get value on Layout component [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related