import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { createContainer } from 'unstated-next'; import { combineProviders } from 'react-combine-provider'; const useCounter1 = (initialState = 1) => { const [count, setCount] = useState(initialState); const decrement = () => setCount(count - 1); const increment = () => setCount(count + 1); return { count, decrement, increment }; }; const Counter1 = createContainer(useCounter1); const useCounter2 = (initialState = 2) => { const [count, setCount] = useState(initialState); const decrement = () => setCount(count - 2); const increment = () => setCount(count + 2); return { count, decrement, increment }; }; const Counter2 = createContainer(useCounter2); function CounterDisplay1() { const counter1 = Counter1.useContainer(); console.log('rendering'); return ( <div> <div>counter display 1</div> <div>counter 1</div> <button onClick={counter1.decrement}>-</button> <span>{counter1.count}</span> <button onClick={counter1.increment}>+</button> <br /> </div> ); } function CounterDisplay2() { const counter1 = Counter1.useContainer(); const counter2 = Counter2.useContainer(); return ( <div> <div>counter display 2</div> <div>counter 1</div> <button onClick={counter1.decrement}>-</button> <span>{counter1.count}</span> <button onClick={counter1.increment}>+</button> <div>counter 2</div> <button onClick={counter2.decrement}>-</button> <span>{counter2.count}</span> <button onClick={counter2.increment}>+</button> <br /> </div> ); } const StateProviders = combineProviders([ [Counter1.Provider, { initialState: 5 }], Counter2.Provider, ]); function App() { return ( <StateProviders> <CounterDisplay1 /> <br /> <CounterDisplay2 /> </StateProviders> ); } ReactDOM.render(<App />, document.getElementById('root'));