Trying to Simplify Data Sharing Between Components

Omar Qazi — Tue, 19 May 2020 05:16:56 +0000

Is there a way to share data between multiple React components without using Redux, Context, or Props + Callbacks?

I am trying to find out.

In doing so, I purpose the following react-typescript code.

Before we start coding, let's take a look at what the final app will look and work like.

CodeSandbox

DataObject

class DataObject {
  public static data: string = "initial data";

  static setData(value: string) {
    DataObject.data = value;
  }

  static getData() {
    return DataObject.data;
  }
}

export default DataObject;

Every component that imports this DataObject gets the same DataObject.data variable, rather than new instances, since the data variable is static.

Each component can read the data. But I have not been successful in automatically re-rendering a component when the value of DataObject.data changes. Which is why, I am using buttons to re-render the components.

Component

import React, { useState } from "react";
import DataObject from "./DataObject";

interface IComponentProps {
  componentTitle: string;
  textToSet: string;
}

const Component: React.FC<IComponentProps> = ({
  componentTitle,
  textToSet
}) => {
  const [state, setState] = useState("initial state");

  return (
    <div className="component">
      <div className="component-header">
        <h2>{componentTitle}</h2>
      </div>
      <button
        className="component-button"
        onClick={() => {
          DataObject.setData(textToSet);
        }}
      >
        Set Data
      </button>
      <button
        className="component-button"
        onClick={() => {
          setState(DataObject.getData());
        }}
      >
        Get Data
      </button>
      <div className="component-state">{state}</div>
    </div>
  );
};

export default Component;

Now, we simply use props to pass in the component title and the text that will be used to update DataObject.data by the component.

App

import * as React from "react";
import Component from "./Component";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Simple Data Sharing</h1>
      <Component
        componentTitle="Component One"
        textToSet="set from component one"
      />
      <Component
        componentTitle="Component Two"
        textToSet="set from component two"
      />
      <p>
        Components do not automatically re-render when data changes.
        <br />
        Press the 'Get Data Buttons' to re-render the component
      </p>
    </div>
  );
}

Index

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

I still haven't figured out the following,

How can we automatically re-render a component, when the value of DataObject.data changes.
How do we go about getting that data into a component's state?

I would love to learn and would appreciate your input.

Inspired by Muhammad Awais Shaikh's Post

The simplest way to share data between two unrelated Components in react

Muhammad Awais ・ May 18 ・ 1 min read

#javascript #react

DEV Community: Omar Qazi