Hooks examples

A few hooks are provided as utilities:

useCustomer: Hook to access Customer data (theme, etc.)
useHasMounted: Hook to properly handle expected differences between server and browser rendering.
Helps to avoid "Text content did not match" warnings, during React rehydration.
useI18n: Hook to access i18n/localisation data
usePreviewMode: Hook to access the native Next.js preview mode data/status
useUserSession: Hook to access the user session data

useCustomer

Hook to access customer data

The customer data are pre-fetched, either during SSR or SSG and are not meant to be fetched or modified by the app (they're kinda read-only)
Thus, it's fine to use React Context for this kind of usage.

If you need to store data that are meant to be updated (e.g: through forms) then using React Context is a very bad idea!
If you don't know why, you should read more about it .

Long story short, React Context is better be used with data that doesn't mutate, like theme/localisation
If you need to handle a global state that changes over time, your should rather use a dedicated library (opinionated: I'd probably use Recoil)

1
2
3


            const customer: Customer = useCustomer();

useHasMounted

This hook helps rendering content only when the component has mounted (client-side).
It's helpful when you want some part of your app to only render on the client.

We strongly recommend reading The perils of rehydration to familiarise yourself with this.


            const MyComponent: React.FunctionComponent<Props> = (props): JSX.Element => {
              const hasMounted = useHasMounted();
              if (!hasMounted) {
                // Returns null on server-side
                // Returns null on client-side, until the component has mounted
                return null;
              }

              // Do stuff that will be executed only on the client-side, after rehydration
              return (...)
            };

            export default MyComponent;

useI18n

This hook helps access i18n data in any functional component.

1
2
3


            const { lang, locale }: I18n = useI18n();

usePreviewMode

This hook helps access Next.js native Preview Mode data/status in any functional component.

1
2
3


            const { preview }: PreviewMode = usePreviewMode();

useUserSession

This hook helps access user data in any functional component.

1
2
3


            const { deviceId }: UserSession = useUserSession();