Jotai migration from v1 to v2

Im trying to create an hook with useHydrateAtoms to reuse in different components:

import type { WritableAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";
import type { ReactNode } from "react";

type AnyWritableAtom = WritableAtom<unknown, Array<any>, any>;

type Props = {
  initialValues: Iterable<readonly [AnyWritableAtom, unknown]>;
  children: ReactNode;
};
export const HydrateAtoms = (props: Props) => {
  useHydrateAtoms(props.initialValues);
  return props.children
};

import type { WritableAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";
import type { ReactNode } from "react";

type AnyWritableAtom = WritableAtom<unknown, Array<any>, any>;

type Props = {
  initialValues: Iterable<readonly [AnyWritableAtom, unknown]>;
  children: ReactNode;
};
export const HydrateAtoms = (props: Props) => {
  useHydrateAtoms(props.initialValues);
  return props.children
};

And when using it on the component

type Props = {
  things: number;
  children: ReactNode;
};

return (
    <Provider>
      <HydrateAtoms initialValues={[[value1, value2]]}>
        {props.children}
      </HydrateAtoms>
    </Provider>
  );

type Props = {
  things: number;
  children: ReactNode;
};

return (
    <Provider>
      <HydrateAtoms initialValues={[[value1, value2]]}>
        {props.children}
      </HydrateAtoms>
    </Provider>
  );

Im getting this error:

'HydrateAtoms' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

'HydrateAtoms' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

Any tip?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Jotai migration from v1 to v2