Accessing useSharedCounter within Components

To make my code cleaner I’m exporting my Component into their separate file. By doing so I’m having an issue as I can’t access useSharedCounter

Should I try to pass Rather than

const useSharedCounter = () => useBetween(useCounter);

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

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

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

export default App;

I am trying to do the following But I can’t see to retrieve the useSharedCounter={useSharedCounter} function in either Button.js or Count.js Is this possibel to perform such refactoring with this library?

import Button from "./Button.js'
import Count from "./Count.js'

const useSharedCounter = () => useBetween(useCounter);

const App = () => (
  <>
    <Count useSharedCounter={useSharedCounter} />
    <Buttons useSharedCounter={useSharedCounter} />
    <Count useSharedCounter={useSharedCounter} />
    <Buttons useSharedCounter={useSharedCounter} />
  </>
);

export default App;

[cdric]

Amazing. Thank you so much for your help. Let me test this out and I will keep you posted if I have further question!

[donething]

Hi @cdric,

You should not pass the useSharedCounter hook through the properties of the component. This is the advantage of “use-between”.

You should create a file “use-shared-counter.js” in which you will export the useSharedCounter hook. … Enjoy!

Hello，with React 18.0, I has a problem. index.tsx has changed to those, and the setCount is not working, count is always 0. What need I do to adapt 18.0? Thank you.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)

root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()