Förklaring

useRef används i två syften: att hålla en referens till ett DOM-element och att lagra ett muterbart värde som inte triggar omrendering. Båda koncepten är klientspecifika. DOM finns inte på servern, och mutable state som persists mellan renderingar passar inte server-rendering-modellen.

Felet är vanligast när en komponent hanterar fokus, scroll-position, eller integreras med ett tredjeparts-DOM-bibliotek.

Vanliga orsaker

Saknad 'use client'-deklaration i en komponent som anropar useRef, ofta för att hantera fokus, animationer, eller mäta ett elements storlek med getBoundingClientRect().

Lösning

Lägg till 'use client' i filen:

'use client';

import { useRef } from 'react';

export default function SearchInput() {
  const inputRef = useRef(null);

  const handleFocus = () => inputRef.current?.focus();

  return (
    <>
      <input ref={inputRef} type="search" />
      <button onClick={handleFocus}>Fokusera</button>
    </>
  );
}

Om bara en liten del av en stor komponent behöver useRef, extrahera den till en separat 'use client'-komponent för att hålla server-rendering-ytan så stor som möjligt.