Comparison with related projects

	Context value	Using subscriptions	Optimization for rendering big object	Dependencies	Package size
react-tracked	state-based object</t3>	Yes *1	Proxy-based tracking	No	1.5kB
constate	state-based object	No	No (should use multiple contexts)	No	329B
unstated-next	state-based object	No	No (should use multiple contexts)	No	362B
zustand	N/A	Yes	Selector function	No	742B
react-sweet-state	state-based object</t3>	Yes *3	Selector function	No	4.5kB
storeon	store	Yes	state names	No	337B
react-hooks-global-state	state object	No *2	state names	No	913B
react-redux (hooks)	store	Yes	Selector function	Redux	5.6kB
reactive-react-redux	state-based object</t3>	Yes *1	Proxy-based tracking	Redux	1.4kB
easy-peasy	store</t3>	Yes	Selector function	Redux, immer, and so on	9.5kB
mobx-react-lite	mutable state object</t3>	No *4	Proxy-based tracking	MobX	1.7kB
hookstate	N/A</t3>	Yes	Proxy-based tracking	No	2.6kB

• *1 Stops context propagation by calculateChangedBits=0
• *2 Uses observedBits
• *3 Hack with readContext
• *4 Mutation trapped by Proxy triggers re-render

[bySabi]

Thanks for the link, they have been useful to understand the problem.

Well, it seems that in my case the ‘forceUpdater’ s => ~ s is not a problem because it is called from a useMemo that “observes” the changes in the user’s provided hook output so React is in charge of tracking, and Batching is desirable. https://github.com/bySabi/hookleton/blob/master/src/index.js#L51

Using s => s + 1 does not change anything, in my case. Just as in this example:

import React from 'react';

const App = () => {
  const [s, forceUpdate] = React.useReducer(s => ~s);
  //const [s, forceUpdate] = React.useReducer(s => s + 1, 0);

  console.log('render: ', s); // should be out: "render 0"

  React.useMemo(() => {
     forceUpdate(); // should be out: "render 1"  -- NOT RENDERED --
  }, []);
  React.useMemo(() => {
     forceUpdate(); //should be out: "render 2"
  }, []);

  return null;
}

export default App;

When I create hookleton I try to make it completely user’s hook output transparent and let the React “hook” engine do all the work.

Although surely there is something that escapes me. The code needs other hawk eyes 😃

Thanks for your time.

[dai-shi]

I’m willing to help to compare with react-tracked. 😄 Honestly, I’m not very familiar with MobX and I did have a misconception before, so I can’t be of much help.