• Accueil
  • Exemples
    Native features
    SSR (getServerSideProps)SSGSSG using fallbackSSG using revalidateCatch-all routes
    Built-in features
    HostingStages & secretsCI/CDStatic i18nMonitoringAPI (Airtable)CSS-in-JSCookies consentAnalyticsIconsCSS AnimationsUI components libraryDocs siteMarkdown as JSX
    Built-in utilities
    I18nLink componentAirtableAsset componentHooksHOCsAPIErrors handlingBundle analysisSVG to ReactSecurity auditTracking useless re-renders
  • Documentation
  • Code source
  • Aller au CMS

Built-in utilities

  • I18nLink component
  • AirtableAsset component
  • Hooks
  • HOCs
  • API
  • Errors handling
  • Bundle analysis
  • SVG to React
  • Security audit
  • Tracking useless re-renders

Previous section - Accueil

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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();
If you want to add more utility hooks, here are some famous open-source projects you might want to check out:
  • state-hooks
  • web-api-hooks

Utilisateur 1 - 2023
Tous droits réservés

Conditions générales d'utilisation
Politique de confidentialité
/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg