[antd: Notification] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.

[saifali40]

Warning: [antd: Notification] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.

i'm getting this error while using notification / Message.

[saifali40]

import { App } from 'antd';

const MyPage: React.FC = () => {
    const { message, notification, modal } = App.useApp();
    message.success('Good!');
    notification.info({ message: 'Good' });
    modal.warning({ title: 'Good' });
    // ....
    // other message, notification, modal static function
    return <div>Hello word</div>;
};

const MyApp: React.FC = () => (
    <App>
        <MyPage />
    </App>
);

export default MyApp;

the above code itself breaking.

[emanuelvsz]

I'm having the sabe problem, i want to know a way to fix it too. :(

[afc163]

Please trigger in effect instead.

[nerdess]

I am triggering it in useEffect but still get the error msg...

This is the chain of things:

React Context > triggers hook to grab data > triggers hook that displays an antd message while data is loading.

Inside this custom hook all is wrapped inside an affect:

import { ReactNode, useEffect, useRef } from 'react';
import { message } from 'antd';
import { MessageType } from 'antd/lib/message/interface';

const useStatusMessage = ({
	isLoading,
	isError,
	messages,
}: {
	isLoading: boolean;
	isError: boolean;
	messages: {
		isLoading?: string | ReactNode;
		isError?: string | ReactNode;
	};
}): void => {
	
	const info = useRef<MessageType>();
	const [messageApi] = message.useMessage();

	useEffect(() => {
		const { isLoading: loadingMessage, isError: errorMessage } = messages;

		if (isError && !!errorMessage) {
			info.current = messageApi.error({
				content: errorMessage,
			});
			return;
		}

		if (isLoading && !!loadingMessage) {
			info.current = messageApi.loading({
				content: loadingMessage,
				duration: 0,
			});
			return;
		}

		if (!!info.current && !isLoading) info.current();

	}, [messageApi, isError, isLoading, messages]);
};

export default useStatusMessage;

What could be the fix?

[lucabubi]

instead of messageApi. try using directly message.

[nerdess]

@lucabubi But why can I not use messageApi? Also, messageApi is much more versatile (I can add a key and so on...)

[deepak1-1]

@nerdess Any Update over it
how to use new version of messageApi instead of using directly message ?

[nethzzz]

#45792

[nethzzz]

Use {cotextHolder} on the top your return
here