Question regarding the use of useAtom.

[steve-ds-choi]

Hello,
I am currently learning jotai. While creating an example, I found a potential error.
When switching from "Page 2", "Page 3" to "Page 1" as per the sample,
the value in the console.log is being called twice.

log ---
Menu: page1
App: page1
page1:0 -> Okay!
page1:0 -> Error?

It seems that the console.log is called once when Page 1 is constructed, which is normal.
Then, it seems to be called again due to the useAtom in Page1(), which seems to be an error.
(The event should not occur because counterAtom is already 0.)

Is there a solution for this?
Or is this a bug?

The "<React.StrictMode>" is in a disabled state.

Sample Code - App.js

import React, { useState, useCallback } from 'react';
import { atom, useAtom, useAtomValue } from 'jotai';

import './App.css';

const counterAtom = atom(0);

function Titlebar({ onPage }) {
  const [count, setCount] = useAtom(counterAtom);

  const Menu = React.memo(({ page, title }) => {
    const _onPage = useCallback(() => {
      setCount(0);
      onPage(page);

      console.log("Menu:" + page);

    }, [page]);
  
    return <button onClick={_onPage}>{title}</button>
  });

  return (
    <div className="sidebar">
      <Menu page="page1" title="Page 1" />
      <Menu page="page2" title="Page 2" />
      <Menu page="page3" title="Page 3" />
      <p/>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>0</button>
      <h1>{count}</h1>

    </div>
  );
}

function Page1() {
  const count = useAtomValue(counterAtom);

  console.log("page1:" + count);

  return <div>Page1 {count}</div>;
}

function Page2() {
  console.log("page2:");
  return (<div>Page2</div>);
}

function Page3() {
  console.log("page3:");
  return (<div>Page3</div>);
}

function App() {
  const [page, setPage] = useState('page1');

  console.log("App:" + page);

  return (
    <div className="App">
      <Titlebar onPage={setPage} /> 
      <div className="content">
        {page === 'page1' && <Page1 />}
        {page === 'page2' && <Page2 />}
        {page === 'page3' && <Page3 />}
      </div>
    </div>
  );
}

export default App;

[dai-shi]

If you wrap console.log() with useEffect() and the result is something you expect, it's not a bug, but an intentional behavior for things like concurrent rendering.

[steve-ds-choi]

Thanks for your answer.