Skip to main content

Is Client Ready

This is a utils to check wether the client is ready or not for react 18 upgrade. This is a mitigation for typeof window === 'undefined', as this checker will now throw hydration error.

To use it in your page, simply import the useClientReady hooks in the variable and use it for checker in your component

import Head from 'next/head';
import { useClientReady, TravelokaPageComponent } from '@traveloka/core';

const FlightSearchMulticity: TravelokaPageComponent<Props> = (props: Props) => {
const isClientReady = useClientReady();

// instead of typeof window === 'undefined', use isClientReady instead
if (!isClientReady) {
return null;
}

return <>Hello!</>;
};