DEV Community

Slava Birch
Slava Birch

Posted on • Updated on

Sharing React hooks stateful logic between components

When you want to separate your React hooks between several components it's can be very difficult, because all context data stored in React component function area. If you want to share some of state parts or control functions to another component your need pass It thought React component props. But If you want to share It with sibling one level components or a set of scattered components, you will be frustrated.

useBetween hook is the solution to your problem 😚

// App.jsx
import React, { useState, useCallback } from 'react';
import { useBetween } from 'use-between';

const useCounterStore = () => {
  const [count, setCount] = useState(0);
  const inc = useCallback(() => setCount(c => c + 1), []);
  const dec = useCallback(() => setCount(c => c - 1), []);
  return {
    count,
    inc,
    dec
  };
};

const Count = () => {
  const { count } = useBetween(useCounterStore);
  return <p>{count}</p>;
};

const Buttons = () => {
  const { inc, dec } = useBetween(useCounterStore);
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

Example on codesandbox

useBetween is a way to call any hook. But so that the state will not be stored in the React component. For the same hook, the result of the call will be the same. So we can call one hook in different components and work together on one state. When updating the shared state, each component using it will be updated too.

If you like this idea and would like to use it, please put star in github. It will be your first contribution!

GitHub logo betula / use-between

Sharing state between React components

use-between

npm version npm bundle size build status code coverage typescript supported

When you want to separate your React hooks between several components it's can be very difficult, because all context data stored in React component function area If you want to share some of state parts or control functions to another component your need pass It thought React component props. But If you want to share It with sibling one level components or a set of scattered components, you will be frustrated.

useBetween hook is the solution to your problem 😚

import React, { useState, useCallback } from 'react';
import { useBetween } from 'use-between';
const useCounter = () => {
  const [count, setCount] = useState(0);
  const inc = useCallback(() => setCount(c => c + 1), []);
  const dec = useCallback(() => setCount(c
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
cmoen11 profile image
Christian Moen

The demo isn't working.. Some errors in package.json.

Collapse
betula profile image
Slava Birch Author • Edited on

Hi, Christian! Thank you! I updated the example in the article for better understanding 👍
And here is the fixed link to the previous example.

I will be very glad for feedback about the library! 👍