reactjs - ¿Cómo usar los Contextos de React con Hooks?

En mi aplicación, estoy intentando usar los Contextos de React con setState.

const userContext = React.createContext([{ user: {} }, () => {}]);
const userHook = useState({ user: {} });

<userContext.Provider value={userHook}>
// some other code here
</userContext.Provider>

Sin embargo, estoy recibiendo este error en mi linter:

.

¿Alguien podría indicarme la dirección correcta?

Además, cuando intento usar React.createContext() como en muchos tutoriales, por ejemplo:

const ThemeContext = createContext(["green", () => {}]);

Recibo otro error del linter sobre una función flecha vacía inesperada. ¿Cómo puedo solucionar eso?

Respuesta #1

Necesitas corregir los tipos del contexto que estás creando:

import { Dispatch, SetStateAction } from "react";

const userContext = createContext<
  [{ user: {} }, Dispatch<SetStateAction<{ user: {} }>>]
>([{ user: {} }, () => {}]);

Ahora, no verás ningún error de tipo al proporcionarlo usando:

const userHook = useState({ user: {} });
// ...
<userContext.Provider value={userHook}>
  <Foo />
</userContext.Provider>

Recuerda que userHook será un arreglo que puedes desestructurar como:

function Foo() {
  const userHook = useContext(userContext);
  const [user, setUser] = userHook // Here, destructuring the array
  return <h1>Foo</h1>;
}

Respuesta #2

const userHook=useState({ user: {} }); está mal. useState devuelve [state, setState]. Intenta cambiar la implementación.

const [state, setState] = useState({ user: {} });

<userContext.Provider value={state}>
// some other code here
</userContext.Provider>