Is it possible to share states between components using the useState() hook in React?

by

If you are referring to component state, then hooks will not help you share it between components. Component state is local to the component. If your state lives in context, then useContext hook would be helpful.

Fundamentally, I think you misunderstood the line “sharing stateful logic between components”. Stateful logic is different from state. Stateful logic is stuff that you do that modifies state. For e.g., a component subscribing to a store in componentDidMount() and unsubscribing in componentWillUnmount(). This subscribing/unsubscribing behavior can be implemented in a hook and components which need this behavior can just use the hook.

If you want to share state between components, there are various ways to do so, each with its own merits:

1. Lift State Up

Lift state up to a common ancestor component of the two components.

function Ancestor() {
    const [count, setCount] = useState(999);
    return <>
      <DescendantA count={count} onCountChange={setCount} />
      <DescendantB count={count} onCountChange={setCount} />
    </>;
  }

This state sharing approach is not fundamentally different from the traditional way of using state, hooks just give us a different way to declare component state.

2. Context

If the descendants are too deep down in the component hierarchy and you don’t want to pass the state down too many layers, you could use the Context API.

There’s a useContext hook which you can leverage on within the child components.

3. External State Management Solution

State management libraries like Redux or Mobx. Your state will then live in a store outside of React and components can connect/subscribe to the store to receive updates.

More Related Contents:

  1. State not updating when using React state hook within setInterval
  2. Make React useEffect hook not run on initial render
  3. Push method in React Hooks (useState)?
  4. React useEffect in depth / use of useEffect?
  5. Is useState synchronous? [duplicate]
  6. Wrong React hooks behaviour with event listener
  7. How to call loading function with React useEffect only once
  8. How to use componentWillMount() in React Hooks?
  9. react useEffect comparing objects
  10. React useState hook event handler using initial state
  11. Multiple calls to state updater from useState in component causes multiple re-renders
  12. What’s the difference between `useRef` and `createRef`?
  13. React useEffect causing: Can’t perform a React state update on an unmounted component
  14. How to programmatically clear/reset React-Select?
  15. How does JavaScript mechanism behind react hooks work?
  16. What is useState() in React?
  17. React – useState – why setTimeout function does not have latest state value?
  18. What does useCallback/useMemo do in React?
  19. React Hooks useState+useEffect+event gives stale state
  20. How to add “refs” dynamically with react hooks?
  21. Do we still need functional setState way in react hooks?
  22. Proper way of using React hooks + WebSockets
  23. Why can’t React Hooks be called inside loops or nested function?
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. Equivalent to componentDidUpdate using React hooks
  26. Performance penalty of creating handlers on every render with react-hooks
  27. Function inside functional component in React hooks – Performance
  28. Updating state to the same value directly in the component body during render causes infinite loop
  29. React Hooks render twice
  30. Why would we use useEffect without a dependency array?

Leave a Comment