CODEWITHSUNDEEP
javascriptreactjstypescript
klugjo
klugjo

Reputation: 20885

Listen to changes in a value inside an object in React context

Given the following React Context Provider. A simple Counter class with 2 methods, stored in the React context.

import { createContext, useContext } from "react";

class Counter {
  public count: number = 0;

  getCount = () => {
    return this.count;
  };

  incrementCount = () => {
    this.count = this.count + 1;
  };
}

type CounterContextType = {
  counter: Counter;
};

const defaults: CounterContextType = {
  counter: new Counter()
};

const CounterContext = createContext<CounterContextType>(defaults);

export const CounterProvider: React.FC = ({ children }) => {
  const counter = new Counter();

  return (
    <CounterContext.Provider
      value={{
        counter
      }}
    >
      {children}
    </CounterContext.Provider>
  );
};

export const useCounter = () => {
  return useContext(CounterContext);
};

I want to listen to changes in the count property of the Counter instance.

Here is what I have tried:

import { useMemo } from "react";
import { CounterProvider, useCounter } from "./CounterProvider";

const DisplayWithMethod = () => {
  const { counter } = useCounter();

  return <div>Method: {counter.getCount()}</div>;
};

const DisplayWithProperty = () => {
  const { counter } = useCounter();

  return <div>Prop: {counter.count}</div>;
};

const DisplayWithMemo = () => {
  const { counter } = useCounter();

  const val = useMemo(() => counter.count, [counter.count]);

  return <div>Memo: {val}</div>;
};

const Button = () => {
  const { counter } = useCounter();

  return <button onClick={counter.incrementCount}>Increment</button>;
};

export default function App() {
  return (
    <CounterProvider>
      <DisplayWithMethod />
      <DisplayWithProperty />
      <DisplayWithMemo />
      <Button />
    </CounterProvider>
  );
}

None of these work since the counter instance never changes, so no re renders are triggered. Any idea(s) on how to make this work while keeping a class structure for Counter.

https://codesandbox.io/s/nostalgic-fast-cyflg

Upvotes: 2

Views: 2819

Answers (1)

Amila Senadheera
Amila Senadheera

Reputation: 13245

The issue is with React is not getting that the count has changed and does not rerender. You can get rid of the issue using useState hook.

You should change type definitions like below and construct counter instances using outputs of useState hook.

import { createContext, useContext, useState } from "react";

type CounterContextType = {
  counter: {
    count: number;
    getCount: () => number;
    incrementCount: () => void;
  };
};

const defaults: CounterContextType = {
  counter: {
    count: 0,
    getCount: () => 0,
    incrementCount: () => undefined
  }
};

const CounterContext = createContext<CounterContextType>(defaults);

export const CounterProvider: React.FC = ({ children }) => {
  const [count, setCount] = useState<number>(0);

  return (
    <CounterContext.Provider
      value={{
        counter: {
          count,
          getCount: () => count,
          incrementCount: () => {
            setCount((prevCount) => prevCount + 1);
          }
        }
      }}
    >
      {children}
    </CounterContext.Provider>
  );
};

export const useCounter = () => {
  return useContext(CounterContext);
};

Code Sandbox

Upvotes: 1

Related Questions