What is the best way to check if a param is valid

[KirianCaumes]

Hi 👋

I'm wondering what is the best way to check if a param is valid or not.

Let's say I have something like this:

function useAppRouter() {
    const router = createBrowserRouter([
        { path: '/login', element: <Login /> },
        {
            path: '',
            element: <Layout />,
            children: [
                { path: '', element: <Index /> },
                { path: 'example', element: <Example /> },
                {
                    path: 'example/:exampleid',
                    element: <ExampleId />,
                    loader: ({ params }) => {
                        if (params.searchid === 'invalid_id')
                            throw redirect('/404')

                        return null
                    },
                },
                { path: '*', element: <NotFound /> },
            ],
        },
    ])

    return {
        router,
    }
}

function AppRouter() {
    const { router } = useAppRouter()

    return (
        <RouterProvider router={router} />
    )
}

This way, with the loader, I can verify if my params.searchid is valid (with some conditions). And it's seems to work fine.

But, as I use Why Did You Render, it shows me that my Layout component is re-rendering because of some internal useContext from react-router.

If I remove the loader, it works fine, no more re-rendering.

Is there a way avoid thess useless re-rendering? Or do you know a better solution to achieve it?

Thanks 🙏