React: Pass useState hook to child

.state-to-child.tsx

import React, { FC, useState } from 'react';

const Component = () => {
	const [barFoo, setBarFoo] = useState(1);
	return <Foo bar={[barFoo, setBarFoo]} />;
};

const Foo: FC<{ bar: StateRef<number> }> = ({ ...state }) => {
	const [bar, setBar] = state.bar;
	return <div />;
};

_why.md

Why?

• I often pass state to child component (best practice I found)
• keep scope-dependent naming
• decrease boilerplate
• correct types

Disadvantages I found:

• doesn't report unused state (because of ...state) - fixed when doing it like this:

  const Foo: FC<{ bar: StateRef<number> }> = ({ bar: barState }) => {
    const [bar, setBar] = barState;
    return <div />;
  };

definition.d.ts

import { useState, Dispatch, SetStateAction } from 'react';

// wrapper for the return type of useState https://stackoverflow.com/a/64840774/1633985
interface wrappedUseState<S> {
	(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
}
/** example: const [a, setA]: StateRef<string> = useState<string>() */
export type StateRef<T> = ReturnType<wrappedUseState<T>>;