Re-initializing state between token routes?

[rfedoruk]

So I'm trying to see if this is the best way to do this.

I am using file based routing, and I have a route that is say: $postId.tsx
In that route, I have some react state that I am initializing with useState(). In that Post I am modifying this state. When I switch to a post with a different postId that state does not re-initialiize.

The way around this that I found is using a useEffect with the dependency array of Route Param.
I don't know if that is a bug or not but my assumption was that it would? Is there a cleaner or better way to do this?

Any help would be appreciated, thank you!
here is the link to stackblitz (posts.$postId.tsx file has what I am talking about,):
https://stackblitz.com/edit/tanstack-router-786xuh?file=src%2Froutes%2Fposts.%24postId.tsx

also here is a short snippet:

  const post = Route.useLoaderData();
  const params = Route.useParams();

  const [counter, setCounter] = React.useState(0);

  // Uncomment this to have counter reset between routes.
  // React.useEffect(() => {
  //   setCounter(0);
  // }, [params.postId]);

  return (
    <div className="space-y-2">
      <h4 className="text-xl font-bold underline">{post.title}</h4>
      {counter}
      <button onClick={() => setCounter((prev) => prev + 1)}>
        Increase Count
      </button>
</div> )
}

[SeanCassiere]

I'd probably stay away from the useEffect and use key to trigger the re-render.

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params: { postId } }) => fetchPost(postId),
  errorComponent: PostErrorComponent as any,
  notFoundComponent: () => {
    return <p>Post not found</p>;
  },
  component: () => {
    const { postId } = Route.useParams();
    return <PostComponent key={postId} />;
  },
});

[rfedoruk]

This works great, thank you!

[VladKopylov]

@SeanCassiere is there any way to get the parameter without using a hook?
I like this solution for resetting state of routes. But question how to manage this eslint rule (do not suggest disabling eslint :) )

[SeanCassiere]

@VladKopylov I agree disabling eslint is not the solution. However, to get around that eslint warning, you'll need to move the component out of the Route definition and reference it from there instead.

export const Route = createFileRoute('/posts')({
	component: PostsComponent
})

function PostsComponent() {
	// ...
}