How do you create a scoped state?

[mctrafik]

Asking for a friend who's allergic to global scope stores.

If I have may components, and I want each one to create their own scope, what's the best way to do that?

I tried a few things, but all of them result in an infinite loop:

export const createValtioState = () =>
  proxy({
    name: '',
    address: { line1: '', line2: '' },
    phone: Promise.resolve(''),
  });


export const ValtioRoot: FC = () => {
  const [state] = useState(createValtioState); // Infinite loop
  const {current: state } = useRef(createValtioState()); // Infinite loop
  const state = useMemo(createValtioState, []); // Infinite loop
  return (
    <>
      <ValtioController state={state} />
      <ValtioView state={state} />
    </>
  );
};

Is there no way to create state inside of the component?

[dai-shi]

My recommendation is to use useRef.

As you use promise in your store, you probably need <Suspense> under ValtioRoot.

[mctrafik]

Hi Dai-shi.

Can you provide a working example? I tried to use useRef (per my post), and it goes into an infinite loop.

[dai-shi]

useRef doesn't solve the infinite loop. Adding <Suspense> should. Have you tried adding it?

[mctrafik]

Ah! That indeed solves the issue. Thank you!

[mctrafik]

Per answer, adding Suspense fixes the infinite loop.

export const ValtioRoot: FC = () => {
  const state = useRef(createValtioState());
  return (
    <Suspense fallback={<></>}>
      <ValtioController state={state.current} />
      <ValtioView state={state.current} />
    </Suspense>
  );
};