reactjs - React/TypeScript - ¿Qué significa "Dispatch<SetStateAction<boolean>>"?

Estoy escribiendo pruebas de frontend para componentes de React en TypeScript. Dado que el código es de un programador más experimentado, algunos tipos de datos me parecen un poco nuevos. Ahora tengo una prop que está definida con "Dispatch" como tipo de dato. He notado que usar la propiedad set de un hook useState funciona, pero no estoy muy seguro de si así es como se supone que debe usarse la prop. Para referencia: la prop se llama "onFullScreenClick". Estaría muy agradecido por una explicación y un ejemplo de lo que probablemente se deba poner.

Respuesta #1

Si miras la fuente de las tipificaciones:

type SetStateAction<S> = S | (prevState: S) => S;

type Dispatch<A> = (action: A) => void;

Dispatch toma una acción como parámetro y no devuelve nada significativo (void). Hay múltiples tipos de acciones, y una de ellas es SetStateAction.

Recuerda que useState puede tomar un nuevo estado, o una función que toma el estado anterior y devuelve el nuevo estado.

Entonces, el tipo de useState es en realidad:

type UseState<S> = (action: S | ((prevState: S) => S)) => void;

Respuesta #2

Es solo una forma de decirle a TypeScript el tipo de las props que estamos pasando

Echa un vistazo a este simple ejemplo contrario del sandbox

Tenemos const [num, setnum]=useState(0) en el componente padre, y pasamos tanto el estado como la función establecedora al componente hijo

El tipo de num se infiere de useState(0), si queremos el tipo de la función setter, solo ponemos el cursor sobre ella, y obtenemos

const setNum: Dispatch<SetStateAction<number>>

y este Dispatch<SetStateAction<number>> es el tipo de función setter.