use-hydrate-example--client-side-component.tsx

client-side-component.tsx

'use client';
import { useHydrate } from 'use-hydrate';

import { setData } from './redux/my.slice';
import { selectData } from './redux/data.selector';


interface Props {
  existing?: MyData[]
}


export default function MyClientSideComponent({ existing = [] }: Props) {
  const data = useHydrate({ initial: existing, action: setData, selector: selectData });

  return (
    <div className="flex">
      { data }
    </div>
  );
}