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:
npx expo install @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.
import { createClient } from '@dynamic-labs/client';
import { useReactiveClient } from '@dynamic-labs/react-hooks'
const dynamicClient = createClient({
environmentId: ''
});
export const useDynamic = () => useReactiveClient(client)
import { useDynamic } from '<path to client file>';
export function Home() {
const { auth } = useDynamic();
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.
Was this page helpful?