limitation of resso

[leftstick]

I found below snippet would not work:

import { useState } from 'react';
import resso from 'resso';

// 🪢 resso
// https://github.com/nanxiaobei/resso

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => store.count++,
});

function App() {
  const [i, setI] = useState(0);

  if (i % 2 === 1) {
    return <div>i === {i}</div>;
  }

  return (
    <>
      <div>{store.count}</div>
      <button
        onClick={() => {
          store.inc();
          setI(i + 1);
        }}
      >
        inc
      </button>
    </>
  );
}

export default App;

Check codesandbox.

It will cause the error Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

We can change it a little bit as below:

import { useState } from 'react';
import resso from 'resso';

// 🪢 resso
// https://github.com/nanxiaobei/resso

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => store.count++,
});

function App() {
  const { count } = store;
  const [i, setI] = useState(0);

  if (i % 2 === 1) {
    return <div>i === {i}</div>;
  }

  return (
    <>
      <div>{count}</div>
      <button
        onClick={() => {
          store.inc();
          setI(i + 1);
        }}
      >
        inc
      </button>
    </>
  );
}

export default App;

The user should eject the value from store before any of condition statement.

I suggest to put such info as notice/usage-limitation in readmd, so that users are able to avoid such issue

[nanxiaobei]

Thanks for your suggestion~

And yes, the README has updated before: https://github.com/nanxiaobei/resso#api

[leftstick]

Oh yeah, i haven't noticed that. Thanks for confirm

[huyansheng3]

感觉这个问题貌似还挺坑的。。。 应该还是建议先提前解构才行，不然在react 内部有时候会出错。

[nanxiaobei]

是的，README 中明确标明了“先解构，再使用”。

感觉这个问题貌似还挺坑的。。。 应该还是建议先提前解构才行，不然在react 内部有时候会出错。

[leftstick]

文档里已经提到了，我就是犯了『文档没看完，暗自揣摩』的毛病。大家引以为戒。看文档还是应当仔细