Client module and react custom hooks ?

[neviaumi]

HI all,

I am going to implement custom hook in my application, so i have something like hook.client.tsx in my application that contain the custom hook.

But when i open the application on browser by npm run dev

It would prompt me TypeError: __vite_ssr_import_2__.useTimer is not a function.

See the example code below

export default function App() {
  const time = useTimer()

  return <>
    <div>{time}</div>
    <Outlet/>
  </>;
}

In my hook my file (named hooks.client.tsx)

import {useEffect, useState} from "react"

export function useTimer() {
    const [time, setTime] = useState(new Date().toLocaleTimeString())

    useEffect(() => {
        const interval = setInterval(() => {
            setTime(new Date().toLocaleTimeString())
        }, 1000)

        return () => clearInterval(interval)
    }, [])

    return time
}

If i add typecheck in the component , it would work perfectly.

function App() {
  if (typeof useTimer !== "function") {
    console.log("useTimer is not a function", {
        useTimer,
    }); // useTimer will undefined for once
    return null;
  }
  const time = useTimer()

  return <>
    <div>{time}</div>
    <Outlet/>
  </>;
}

Or if rename my hook file to hooks.tsx (without .client ), it will work as well.

Do i misunderstand of https://remix.run/docs/en/main/file-conventions/-client ?

the client module should used for wrapping of some dependency that used Browser only API on the top level ?

Example repo here:
https://github.com/neviaumi/remix-custom-hooks-reproduce

[sergiodxa]

You only need to mark a file as client-only (add .client) if it breaks the server when importing it, otherwise it's not an issue and will you will need to first check if the hook is defined to call it since server-side the hook will be undefined.