How to make a shared state between two react components?

Question

I have 2 react components that need to share a state, react-router shows component A, which takes some inputs and adds it to its state, after the state has been successfully updated, I want to redirect to component B, where the user adds some more inputs and updates the same state as component A to build an object with inputs from A and B before I submit a post request to my api to save the data from both component A and B. How can I accomplish this, is there a way to use react-router, or do I have to set up a parent/child relationship between the components?

Answer 1

I'll be going straight to hell for this:

// src/hooks/useMessagePipe.ts
import { useReducer } from 'react'

let message = undefined

export default function useMessagePipe(): { message: string | undefined, sendMessage: (filter: string) => void } {
  const triggerRender = useReducer((bool) => !bool, true)[1]
  function update(term: string) {
    message = message.length > 0 ? message : undefined
    triggerRender()
  }

  return { message: message, sendMessage: update }
}

You can then use this in any component anywhere in your applications' component hierarchy to send a message:

// src/components/ExampleInputToHell.jsx:
import useMessagePipe from 'src/hooks/useMessagePipe'

export const ExampleInputToHell() = () => {
  const { sendMessage } = useMessagePipe()

  return <input onChange={(e) => sendMessage('🔥 Hell-O 😈: ' + e.target.value)} />
}

… and consume the message any component anywhere in your applications' component hierarchy:

// src/components/ExampleOutputInHell.jsx

import useMessagePipe from 'src/hooks/useMessagePipe'

export const ExampleOutputInHell() {
  const { message } = useMessagePipe()

  return <p>{message}</p>
}

Explanation

• let message outside the useMessagePipe-closure holds a global state, that (as far is the theory goes) gets surrounded in it's own module scope
• as react's functional component logic will know nothing about that state, triggerRender – a version of a dirty hack that's actually mentioned on the React FAQ – needs to be applied to signal to react that all components consuming this function are asked to re-evaluate (re-render).

Disclaimer

This is a global state, meaning: all components using useMessagePipe see the same message and access the same update function, application-wide. If you want to have a new "channel" between two other components, you need to create another hook referring to another global state holder outside the closure (like message in this example).

If you know any better and have the time and resources, you probably don't want to go down this muddy road to perdition and instead learn how to properly useContext or (an easier way) give useBetween by @Slava Birch a star.

But if you just want a quick and dirty solution to pipe a piece of data between components right now … well this ~10 lines of code made my day for a simple task at hand and worked flawless so far. However my gut feeling says something is going to break if used for important things, hence any additions & theories on the conditions under which it will break are highly welcome.

Answer 2

You can build custom React hooks to share a state between components, I made one here. You can use it by downloading use-linked-state.js file.

After importing useStateGateway hook, declare a gateway in parent component and pass it down to your child components

import {useStateGateway} from "use-linked-state";
const myGateway = useStateGateway({partA:null, partB:null});
return (
  <>
    <ComponentA gateway={myGateway}>
    <ComponentB gateway={myGateway}>
    <ComponentPost gateWay={myGateway}>
  </>
  )

Then you have access shared state between those three components by a custom useLinkedState hook

import { useLinkedState } from "use-linked-state";

export default function ComponentA({gateway}){

  const [state, setState] =  useLinkedState(gateway);

  <your logic>

}

In your logic ComponentA and ComponentB would be responsible for their part in shared object {partA:"filled by ComponentA", partB:"filled by componentB"}. Finally ComponentPost post the result if partA and partB of shared object were valid.

In this way you can compose components and make connection between them to talk to each other.

Answer 3

The easiest way to use a shared state between several components without rewriting your application's code to some state management system is use-between hook.

Try this example in codesandbox

import React, { useState } from "react";
import { useBetween } from "use-between";

// Make a custom hook with your future shared state
const useFormState = () => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  return {
    username, setUsername, email, setEmail
  };
};

// Make a custom hook for sharing your form state between any components
const useSharedFormState = () => useBetween(useFormState);

const ComponentA = () => {
  // Use the shared hook!
  const { username, setUsername } = useSharedFormState();
  return (
    <p>
      Username: <input value={username} onChange={(ev) => setUsername(ev.target.value)} />
    </p>
  );
};

const ComponentB = () => {
  // Use  the shared hook!
  const { email, setEmail } = useSharedFormState();
  return (
    <p>
      Email: <input value={email} onChange={(ev) => setEmail(ev.target.value)} />
    </p>
  );
};

const ComponentC = () => {
  // Use shared hook!
  const { email, username } = useSharedFormState();
  return (
    <p>
      Username: {username} <br />
      Email: {email}
    </p>
  );
};

export const App = () => (
  <>
    <ComponentA />
    <ComponentB />
    <ComponentC />
  </>
);

• For first, we create useFormState custom hook as a source for our state.
• In the next step, we create useSharedFormState hook who uses useBetween hook inside. That hook can be used in any component who can read or update the shared state!
• And the last step is using useSharedFormState in our components.

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.

Answer 4

The dependency type between the components will define the best approach.

For instance, redux is a great option if you plan to have a central store. However other approaches are possible:

• Parent to Child

  1. Props
  2. Instance Methods

• Child to Parent

  1. Callback Functions
  2. Event Bubbling

• Sibling to Sibling

  1. Parent Component

• Any to Any

  1. Observer Pattern
  2. Global Variables
  3. Context

Please find more detailed information about each of the approaches here

Answer 5

What you want is to implement some object that stores your state, that can be modified using callback functions. You can then pass these functions to your React components.

For instance, you could create a store:

function Store(initialState = {}) {
  this.state = initialState;
}
Store.prototype.mergeState = function(partialState) {
  Object.assign(this.state, partialState);
};

var myStore = new Store();

ReactDOM.render(
  <FirstComponent mergeState={myStore.mergeState.bind(myStore)} />,
  firstElement
  );
ReactDOM.render(
  <SecondComponent mergeState={myStore.mergeState.bind(myStore)} />,
  secondElement
  );

Now, both the FirstComponent and SecondComponent instances can call this.props.mergeState({ . . .}) to assign state to the same store.

I leave Store.prototype.getState as an exercise for the reader.

Note that you can always pass the store (myStore) itself to the components; it just feels less react-y to do so.

Here is some more documentation that might be of interest:

React Docs: "Communicate Between Components"

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.

Answer 6

Either you can set up a parent child relationship then you can pass data to child components as props.

Else, if you want to create interaction between 2 components which are not related to either(parent/child) you can either check out flux or even better redux.

I would say you should go with redux.See Here why