[bug] useSelector won't trigger update if value is changed back to initial one

[xzilja]

Was playing around with useSelector and came across one problem. Assuming use case below (also available at https://codesandbox.io/s/zealous-visvesvaraya-tvvn7?file=/src/App.tsx)

If you start with initial value of pageOne, change it to pageTwo and then try to change it back to pageOne component is not re-rendered / no update happens. However toggling between pageTwo and pageThree works fine. You can check this in codesandbox mentioned above.

State

import { newRidgeState } from "react-ridge-state";

export interface RouterState {
  page: string;
}

const { set, useValue, useSelector } = newRidgeState<RouterState>({
  page: "pageOne"
});

export const useRouterValue = useValue;
export const useRouterSelector = useSelector;

export function push(page: RouterState["page"]) {
  set({ page });
}

Component

import React from "react";
import { useRouterValue, useRouterSelector, push } from "./routerState";

export default function App() {
  // This Works
  // const { page } = useRouterValue();

  // This Doesn't work
  const page = useRouterSelector(s => s.page);

  return (
    <div>
      <button onClick={() => push("pageOne")}>Page One</button>
      <button onClick={() => push("pageTwo")}>Page Two</button>
      <button onClick={() => push("pageThree")}>Page Three</button>

      {page === "pageOne" && <h1>Page One</h1>}
      {page === "pageTwo" && <h1>Page Two</h1>}
      {page === "pageThree" && <h1>Page Three</h1>}
    </div>
  );
}

[RichardLindhout]

Thanks for the reproduction. I'm looking into this issue

[RichardLindhout]

I thinks it's because I forgot a dependency in the callback I will first add more safety measures with eslint to prevent this in future!

[RichardLindhout]

Added test + it's fixed now :) https://codesandbox.io/s/bold-wu-9x8mx?file=/src/index.tsx