I wanted to make a reusable toast. I’m using shadcn and remix.
I want to avoid useEffect in each component that I wanted to have a success or error message. What’s the best way to do that?

export const action = async ({ request, context }) => {
    const formData = await request.formData();
    const { _action, email } = getValues<{
        _action: string;
        email: string;
    }>(formData);

    if (_action === "magic-link") {
        const errors = authValidate(email);
        if (errors) {
            return json({ ok: false, errors }, 400);
        }
        try {
            const response = await sampleAPI({
                json: {
                    email,
                },
            });
            console.log(response);

            return json({
                title: "Success!",
                message: "Please check your email for the verification link to complete your signin process.",
                type: "success",
            });
        } catch (err) {
            console.error(err);
            return json({
                title: "Uh oh! Something went wrong.",
                message: "There was a problem with your request.",
                type: "error",
            });
        }
    }

    if (_action === "google") {
        console.log("HEY GOOGLE");
    }

    return null;
};

export default function LoginRoute() {
    const { toast } = useToast();
    const actionData = useActionData<typeof action>();

    useEffect(() => {
        if (actionData?.title && actionData.message) {
            toast({
                title: (
                    <div className="flex items-center gap-2">
                        {actionData?.type === "success" ? (
                            <CircleCheckBig className="text-success" />
                        ) : (
                            <CircleX className="text-destructive" />
                        )}{" "}
                        {actionData?.title}
                    </div>
                ),
                description: actionData?.message,
            });
        }
    }, [actionData, toast]);


    return (<h1>TEST</h1>);

}