I'm not sure if this is a known limitation of this library or a bug. I couldn't find any reference on this.

Reproduce

https://codesandbox.io/s/shy-fast-c1v73

Additional Info

Declare store with initialValue:

export const useCounter = createStore(initialValue => {
  useState(initialValue);
});

Calling hooks with initial value as argument:

const [counter] = useCounter(0);

I felt in love with this abstraction after seeing this talk https://www.youtube.com/watch?v=oy-6urveWzo but it has been 1 year and so few stars/forks for such a great idea.
I wonder if you guys are still "eating your own dog food" or found some issues with it or something better.

I love your idea, and I'd like to use it, but there is quite a tricky case that seems to make it unusable.

In React Native, when using wix react native navigation, every screen (eg in tabs based app) is technically new react root, so it requires to be wrapped in proper providers independently.

As every view is technically different react root, every provider would have 'fresh' state and therefore state will not be shared across screens.

Would such limitation be possible to be solved with reusable?

(wix navigation discussion - wix/react-native-navigation#3549 )

Quick clarification on using multiple stores.

Can I reference multiple stores inside a single component?
//
// create 2 separate stores, neither knows about each other
//

// store 1
const useCurrentUser = createStore(() => {
return useState("John");
});

// store 2
const useCounter = createStore(() => {
const [counter, setCounter] = useState(0);
..

// try to reference both stores in a component (second reference does not work)
// Component
const Footer = () => {
// reference store 2
const counter = useCounter();
// reference store 1
const [currentUser, setCurrentUser] = useCurrentUser(); <==== currentUser is 'undefined'

Therefore, we have to compose multiple stores into 1 master store and then use that 1 master store in our components?

Hi!

What do you think about Recoil?

Add an example with an existing Redux store, where Reusable is introduced and needs data from Redux (with the new Redux hooks API)

One benefit is that you got inspection for free via react dev tools

What else?

Hi all,

Is there a way to pass setup data to the different stores that I create to manage state? My workaround is currently to create a SettingsProvider and read the context to pass some global data to the different stores.

render(
  <SettingsProvider settings={JSON.parse(app.dataset.page)} >
    <ReusableProvider>
      <InertiaApp
        initialPage={JSON.parse(app.dataset.page)}
        resolveComponent={name => require(`./Pages/${name}`).default}
      />
    </ReusableProvider>
  </SettingsProvider>,
  app
)

And inside a Store:

import { useContext } from "react";
import { createStore } from "reusable";

import {SettingsContext} from '../Providers/SettingsProvider';

const useResellerProducts = createStore(() => {
    const {resellerProducts} = useContext(SettingsContext);
    return {resellerProducts}
});
export default useResellerProducts;

The object resellerProducts is passed from the backend, I need it to be available in some of the stores. Is there a better way to pass data into the stores (from the backend)?

Make sure we can use Reusable with SSR when hydrating with state. Not sure that's possible under the current implementation because the state is saved in a component's state.

Add an example of a global store that is keyed, like handling entities by ID

I am trying to have multiple reusable providers on two different react component. If I update a state in the store then the component where I am using the state is rendering multiple times. Sometimes the state values are different on each render.

Reproduce

https://codesandbox.io/s/clever-curie-bqmbx

Add an example that has async flows with API calls that saves data in Reusable stores

We've updated our app to React 17, but encountered weird bugs where state updates did not get back in other components where the store was used. It's a complex app, but downgrading to React 16 fixed these bugs for us. I will try to make a real bug report, but have any of you encountered this problem?

Type "abc" then go back and delete "b".
The cursor will jump to the end of the input.
https://codesandbox.io/s/reusable-input-bug-0hdnk

Steps to produce:

1. run the application.
2. open react dev tools.
3. go to the cached_value property inside the store.
4. try to play with the application.

Can do on TodoMVC example. Just need to see how a developer might test a store. Sounds like it's just like testing a regular hook, but with a ReusableProvider wrapper

Configurable in Provider, for example:
<ReusableProvider logger={NODE_ENV === 'development'}>

By default it's false

When asynchronously updating the state of a reusable store multiple times, sometimes the final update is not reflected in the state that is returned to the subscriber.

This appears to only happen when updating the state an even number of times, from within an async function. The value remains stale until the state is updated again.

The reproduction below uses a contrived example with Promise.resolve, but the issue seems to occur for any async function (i.e. after fetching data, setTimeout callback, etc).

Reproduce

Sandbox reproduction:
https://codesandbox.io/s/reusablejs-react-17-bug-4hg8n?file=/src/App.js

This same code seems to be working on React 16:
https://codesandbox.io/s/reusablejs-react-16-no-bug-g8jz5?file=/src/App.js

Additional Info

• package.json (from codesandbox above):

{
  "name": "reusablejs-react-17-bug",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0",
    "reusable": "1.0.1"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8",
    "typescript": "4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

• which browser
  Chrome, Safari

Add an example with lazy loaded modules that have their own Reusable stores. Make sure the stores are added dynamically to the container

I trying to update a component(CompA) from another component(CompB) and CompB has

const [data, setData] = useData((state) => {
    return state;
}, () => true);

I am using the areEqual here to stop the re-render of CompB. Now setting the data using setData here not updating the store.

and in CompA

const [data, setData] = useData();

It always gives the initialData.

Its appears the npm package published does to link back to this repo. The repo is usally show to users can visit this page right fro npm.

Can I port this/Clone this into dart/flutter?

Could I get assistance by asking for clarification on certain things?

Thanks
Sean

We want to make sure it doesn't create a conflict when accessing Reusable from external lib and own code.
The external lib should have Reusable as peer dep

The bottom ones should not provide the container again if it's already provided above it.
So probably just bring it with context and if it exists just render children

Rename to createStore instead of reusable

in readme in one code snippet it is written:

const useCurrentUser = createStore(() => ...);
const usePosts = createStore(() => ...);

const useCurrentUserPosts = createStore(() => {
  const currentUser = useCurrentUser();
  const posts = useCurrentUser();
  
  return ...
});

inside useCurrentUserPosts function you are using useCurrentUser() twice instead of using usePosts() for posts