Rendering client state to React

Our client was built in vanilla javascript, and therefore its state is not able to trigger React rerenders out of the box upon mutation.

But fear not, for we have a simple, lightweight solution to this problem: the react-hooks package. It provides you with the useReactiveClient hook, which wraps the client in a proxy that is ready to be used directly inside JSX.

Since our client was built with a modular approach, this package comes as a standalone, so to reduce the client’s package size.

Installation

Simply run the following in your terminal:

npm i @dynamic-labs/react-hooks@alpha

Using client’s state inside JSX

All you need to do is wrap your client with useReactiveClient inside your component.

This wraps the client in a proxy that keeps track of, for each render, which variables you have accessed. As soon as one of these variables’ state mutates, React automatically rerenders, and the cycle restarts. This means you only trigger rerenders for variables you are actually reading from, keeping rerenders to a minimum.

export function Home() {
  const { auth } = useReactiveClient(client)

  return (
    <>
      <View>
        <Text>JWT:</Text>
        <Text>{auth.token}</Text>
      </View>

      <View>
        <Text>User:</Text>
        <Text>{auth.authenticatedUser?.email}</Text>
      </View>

      <Button title="Logout" onPress={() => auth.logout()} />
    </>
  )
}

You can read more about our react hooks package here.