About Rerendering ，Is it a bug or my usage error，Request help

[ljianc]

1. Index component only access snapshot.loading
2. Content component only set state .message
3. Why Index component Rerendering 3 times, My understanding should be 2 times

const state = proxy({ loading: true, message: "" });

function Index() {
  const snapshot = useSnapshot(state);
  const Node = snapshot.loading ? Loading : Content;
  useEffect(() => {
    console.log("Log Index Rerendering");
  });
  useEffect(() => {
    state.loading = false;
  }, []);
  return <Node />;
}

function Loading() {
  return <>loading</>;
}

function Content() {
  useEffect(() => {
    //If this is added，Index Rerendering 3 times
    state.message = "welcome";

    //If this is removed，Index Rerendering 2 times
    //state.message = "welcome";
  }, []);
  return <>test</>;
}

[dai-shi]

Hope this helps: https://codesandbox.io/s/elastic-hamilton-ed60fr?file=/src/App.js

[ljianc]

Hope this helps: https://codesandbox.io/s/elastic-hamilton-ed60fr?file=/src/App.js

Thank you for your reply

Why state.message = "welcome" does it trigger Index Rerendering
(Index only accessed snapshot.loading)

Is my understanding of Valtio rendering optimization incorrect？
What is the correct way to implement this example?

[dai-shi]

Ah, I see your point. Yeah, it doesn't look intuitive.
I think useEffect behaves interestingly. Maybe useSyncExternalStore does something to make things safe.
FWIW, here's an example without useEffect: https://codesandbox.io/s/sparkling-sun-m6ris4

In general, we should avoid changing state in useEffect.

[ljianc]

oh，This problem has been bothering me for 2 days，thank you very much !