rn-app/hooks/useClientOnlyValue.web.ts

/**
 * Client-only value Hook (Web version)
 *
 * This hook is used to provide different values for server-side rendering (SSR)
 * and client-side rendering on web platforms.
 *
 * On web, we use `useEffect` to detect if we're on the client or server,
 * since `useEffect` is not invoked during server rendering.
 *
 * @param server - Value to use during server-side rendering
 * @param client - Value to use during client-side rendering
 * @returns The appropriate value based on the rendering context
 *
 * @example
 * ```tsx
 * // Disable header on server, enable on client
 * headerShown: useClientOnlyValue(false, true)
 * ```
 */

import React from 'react';

// `useEffect` is not invoked during server rendering, meaning
// we can use this to determine if we're on the server or not.
export function useClientOnlyValue<S, C>(server: S, client: C): S | C {
  const [value, setValue] = React.useState<S | C>(server);

  React.useEffect(() => {
    setValue(client);
  }, [client]);

  return value;
}