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