Performance impact: Not re-rendering a component when only calling a shared function about constate HOT 3 CLOSED

FYI: I've been working on a solution for this issue. The working in progress is here: https://github.com/diegohaz/constate/tree/feat/multiple-contexts

The API looks like this:

// renamed to createContextHook, but no breaking changes, since it's default export
import createContextHook from "constate";

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

const [Provider, useCount, useIncrement] = createContextHook(
  useCounter,
  value => value.count, // becomes useCount
  value => value.increment // becomes useIncrement
);

There are no breaking changes. The current API still works! All these APIs are supported:

const useCounterContext = createContextHook(useCounter);
<useCounterContext.Provider />

const useCounterContext = createContextHook(useCounter, value => [value.count]);
<useCounterContext.Provider />

const [CounterProvider, useCounterContext] = createContextHook(useCounter);
<CounterProvider />
<useCounterContext.Provider />

const [CounterProvider, useCount] = createContextHook(useCounter, value => value.count);
<CounterProvider />

from constate.

I also tried referring to the solution you proposed for
#82 (comment)
Which is createMemoInputs

/ /re-render consumers only when value.count changes
const useCounterContext = createUseContext(useCounter, value => [value.count]);

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

But here I have another component Like where what I only want is to increment the the counter by 1 automatically every time it loads.
But the below code now load the Like component twice.

function Like() {
  const { increment } = useCounterContext()

  useEffect(() => {
    increment() //We are not using count only calling increment
  }, [])   //You can also use [increment] to avoid warning in console

  return "Like Component"
}

export default Like

The component loads once on the first load and the second due to it being re-rendered since increment was called.
Remove the increment call and it loads only once
This is something that should be avoided, else will be a major perf issue with the library.
Imagine if there are API calls, we don't want same calls going twice.

Please help me understand if I am missing something

from constate.

I see that you have renamed the API which is a step towards addressing this issue.
Any tentative timelines on it.
I would also recommend adding the example similar to the LIKE one I explained above so that users can make optimized use of this library in the right way and also understand how state variables and functions can be worked with.
Again thanks for getting back, I was just hoping it was being maintained. Your comment today puts me at ease 👍

from constate.