Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Zustand | 35,601 | 10 | 1,336 | 2 days ago | 113 | August 01, 2023 | 1 | mit | TypeScript | |
🐻 Bear necessities for state management in React | ||||||||||
Mobx | 26,736 | 9,267 | 4,420 | 5 days ago | 241 | July 18, 2023 | 43 | mit | TypeScript | |
Simple, scalable state management. | ||||||||||
Jotai | 15,079 | 389 | 2 days ago | 150 | July 31, 2023 | 4 | mit | TypeScript | ||
👻 Primitive and flexible state management for React | ||||||||||
Boardgame.io | 9,659 | 32 | 24 | a month ago | 203 | November 10, 2022 | 94 | mit | TypeScript | |
State Management and Multiplayer Networking for Turn-Based Games | ||||||||||
Awesome React Hooks | 9,251 | 2 months ago | 9 | cc0-1.0 | ||||||
Awesome React Hooks | ||||||||||
Rematch | 8,401 | 210 | 156 | 7 days ago | 76 | November 09, 2021 | 23 | mit | TypeScript | |
The Redux Framework | ||||||||||
React Final Form | 7,282 | 500 | 628 | 4 months ago | 76 | April 01, 2022 | 390 | mit | JavaScript | |
🏁 High performance subscription-based form state management for React | ||||||||||
Mobx State Tree | 6,781 | 479 | 385 | 6 days ago | 109 | March 10, 2023 | 125 | mit | TypeScript | |
Full-featured reactive state management without the boilerplate | ||||||||||
Router | 5,147 | 13 | 5 days ago | 15 | March 21, 2022 | 26 | mit | TypeScript | ||
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. | ||||||||||
Easy Peasy | 4,999 | 37 | 57 | 7 days ago | 261 | July 28, 2023 | 12 | mit | JavaScript | |
Vegetarian friendly state for React |
Define your async methods. Use them synchronously in React. Instantly mutate the data and automatically update all usages.
For REST, GraphQL, Websockets+SSE and more
npm install --save @data-client/react @data-client/rest @data-client/test @data-client/hooks
For more details, see the Installation docs page.
class User extends Entity {
id = '';
username = '';
pk() {
return this.id;
}
}
class Article extends Entity {
id = '';
title = '';
body = '';
author = User.fromJS();
createdAt = Temporal.Instant.fromEpochSeconds(0);
pk() {
return this.id;
}
static schema = {
author: User,
createdAt: Temporal.Instant.from,
};
}
const UserResource = createResource({
path: '/users/:id',
schema: User,
optimistic: true,
});
const ArticleResource = createResource({
path: '/articles/:id',
schema: Article,
searchParams: {} as { author?: string },
optimistic: true,
paginationField: 'cursor',
});
const article = useSuspense(ArticleResource.get, { id });
return (
<article>
<h2>
{article.title} by {article.author.username}
</h2>
<p>{article.body}</p>
</article>
);
const ctrl = useController();
return (
<CreateProfileForm
onSubmit={data => ctrl.fetch(UserResource.getList.push, { id }, data)}
/>
<ProfileForm
onSubmit={data => ctrl.fetch(UserResource.update, { id }, data)}
/>
<button onClick={() => ctrl.fetch(UserResource.delete, { id })}>Delete</button>
);
const price = useLive(PriceResource.get, { symbol });
return price.value;
const ctrl = useController();
ctrl.expireAll(ArticleResource.getList);
ctrl.invalidate(ArticleResource.get, { id });
ctrl.invalidateAll(ArticleResource.getList);
ctrl.setResponse(ArticleResource.get, { id }, articleData);
ctrl.fetch(ArticleResource.get, { id });
const queryTotalVotes = new Query(
new schema.All(Post),
(posts, { userId } = {}) => {
if (userId !== undefined)
posts = posts.filter(post => post.userId === userId);
return posts.reduce((total, post) => total + post.votes, 0);
},
);
const totalVotes = useCache(queryTotalVotes);
const totalVotesForUser = useCache(queryTotalVotes, { userId });
class LoggingManager implements Manager {
getMiddleware = (): Middleware => controller => next => async action => {
console.log('before', action, controller.getState());
await next(action);
console.log('after', action, controller.getState());
};
cleanup() {}
}
const fixtures = [
{
endpoint: ArticleResource.getList,
args: [{ maxResults: 10 }] as const,
response: [
{
id: '5',
title: 'first post',
body: 'have a merry christmas',
author: { id: '10', username: 'bob' },
createdAt: new Date(0).toISOString(),
},
{
id: '532',
title: 'second post',
body: 'never again',
author: { id: '10', username: 'bob' },
createdAt: new Date(0).toISOString(),
},
],
},
{
endpoint: ArticleResource.update,
response: ({ id }, body) => ({
...body,
id,
}),
},
];
const Story = () => (
<MockResolver fixtures={options[result]}>
<ArticleList maxResults={10} />
</MockResolver>
);
For the small price of 9kb gziped. 🏁Get started now