How to use with a React class component?

[ChrisLincoln]

What is the general technique for consuming Zustand within a class component in React? My first (gross) attempt:

componentDidMount() {

    this.unsub = useStore.subscribe((bears) => {
       this.setState({bears})
    }, (state) => state.bears);

    this.setState({bears: useStore.getState().bears})
  }

componentWillUnmount() {
    this.unsub();
  }

render() {
    const {bears} = this.state;
    ...
  }

[dai-shi]

It looks good.

[ChrisLincoln]

Thanks. It feels wrong to use React.component state like that--in a state-derived-from-props sort of way. I just wanted to make sure I am not overlooking something easier. I haven't created a class component since the very day that the React team uttered "hooks" in public, so I've sort of lost my touch in using React.Component. But I'm diving into an older codebase that is full of class components and prop-drilling. I am weighing the trade-offs of using Zustand, which I use in all new projects, vs sticking with the original pattern.

[dai-shi]

In that sense, I may overlook too. I'm not very familiar with class components. The alternative way is to wrap a class component with a function component and useStore there.

[ChrisLincoln]

Ahhh. Great idea.

[Real-Music]

Thanks works perfectly

[christophemarois]

Relevant code example: https://stackoverflow.com/a/66085534/1558527

[tobyscott25]

Zustand uses hooks, so in Class components you can work with the instance itself, using the built-in getState() and setState() functions. Example:

Zustand Store:

import create from "zustand";

export interface ExampleStore {
  exampleString: string;
  setString: (x: string) => void;
}

export const useExampleStore = create<ExampleStore>((set) => ({
  exampleString: "",
  setString: (x) => set(() => ({ exampleString: x })),
}));

React Class Component:

import { useExampleStore } from "./exampleStore";

class ExampleComponent extends Component {
  render() {
    return (
      <div>
        <div>{useExampleStore.getState().exampleString}</div>
        <button
          onClick={() => {
            useExampleStore.setState({ exampleString: "Hello Zustand!" });
          }}
        >
          Update the string!
        </button>
      </div>
    );
  }
}

[Gabriel52]

thank's

[mohadib]

I dont think your class would re-render when the store values change.

[tobyscott25]

I dont think your class would re-render when the store values change.

No, you need to subscribe to the store in Class components

[mohadib]

This function works like connect in Redux.

import React, {Component} from 'react'
import {useShallow} from 'zustand/react/shallow'

export const zustandConnect = (useStore, selector) => {
  return Component => (
    React.forwardRef(
      (props, ref) => (
        <Component
          ref={ref}
          {...props}
          {...useStore(useShallow(selector))}
        />
      )
    )
  )
}

usage

const mapStateToProps = ({setName, setDate, date}) => ({
  setName,
  setDate,
  date
})

export default zustandConnect(useTestStore, mapStateToProps)(TestComponent)