What is the best way to rerender a component?

[shadow drum]

The route action when run will re run the loader, so if you set it up correctly the components will react to that change.

[coral field]

It’s not rerender the navbar..

@shadow drum How would you set it up correctly?

I mean, how the components know they need to be render or updated again?

[shadow drum]

You make the routeloader return whether the user is logged in or not, then have the nav bar change depending on the value of the loader

[coral field]

This is what I do, and it works perfectly.
However when I want to update the cookies from other component the navbar is not render the routeloader again.

export const useGetCurrentUser = routeLoader$<UserCtx | null>(async ({ cookie }) => {
  const accessCookie = cookie.get(ACCESS_COOKIE_NAME)?.value;
  const refreshCookie = cookie.get(REFRESH_COOKIE_NAME)?.value;

  let data: UserCtx | null = null;
  if (accessCookie) {
    data = jwt_decode(accessCookie);
  } else if (refreshCookie) {
    const { accessToken, refreshToken } = await refreshTokens(refreshCookie);

    setTokensAsCookies(accessToken, refreshToken, cookie);
    data = jwt_decode(accessToken);
  }

  if (data) {
    data.profilePicture = await getProfilePictureUrl(data.id, data.name);
  }

  return data;
});

@shadow drum This is the routeloader, now when I update the cookie in other component the navbar is not rerenderd (and it's ok because I don't know how it will rerender automatically)
My question is, what is the way / best practice to implement this kind of functionality?

[shadow drum]

Hmmm, you’re probably doing something then that makes the loader reload before the cookie is set. This might be a wonky setup, but you could use a usetask that tracks the cookie value, if it changes then call an action that reloads.

I guess to better help maybe share how you use the value in the navbar as well?

[coral field]

I can dm you if that's ok 🙂

This is how I use the routeLoader within the Navbar.

Btw, how can you call an action that reloads?

@shadow drum

[shadow drum]

All actions reload the loaders, so it can be empty if you want

[coral field]

I will try that.

[shadow drum]

Also when the value is passed to a component like that, it’s likely static. So instead of passing through props, get the value in the component itself

And that might actually be why you’re not seeing the update. So no need to do the empty action and the usetask

[coral field]

I will try that first.

1 seconds

Ok, passing the whole signal didn't solve the issue.
I also tried to use the routeLoader within the Profile itself. it still didn't chnaged at all. only after refresh it worked.

Here is a video to demonstrate my problem

@shadow drum Seems like it still not works.

[shadow drum]

And how are you accessing the loader in the component now?

[coral field]

In the profile componenet?

I tried to use the routeLoader witin the navbar and pass the actual signal

I can see the action reloads the loader. however it seems like value not get updated.

This is the profile itself

interface ProfileProps {
  user: Signal<UserCtx>;
}

export const Profile = component$(({ user }: ProfileProps) => {
  useStylesScoped$(styles);

  return (
  <img height={64} width={64} src={user.value.profilePicture}/>       
  );
});
};

@shadow drum

You are right, indeed it reloads the routeLoader!
However I don't get any update

You can see in the terminal, when I reload the page I do get the image printed.
However when I do it via the action it did trigger the reload but the image not printed. (user not get updated)

[shadow drum]

I would suggest getting the value inside the component itself, so that you’re not prop drilling, that makes changes hard.

If the value isn’t updating, but you know the loader has been re run, then the issue likely lies in how the logic of that loader works. Whether it be how you’re using cookies or how you access the data.

[coral field]

I tried it as well, I did use track on Navbar component when I access the routeLoader directly. it still not getting the update there.

Although I can see the data I return from the loader is good.

I don't know what to do.. /:

I can also see that the image actually changed from the loader. however the image not replicated to the components that using the routeLoader.

@shadow drum What do you think?

[coral field]

I am so stupid lol, the problem was that the image was cached in the browser.
fixed it by adding lastModified param to the image url.