Лучшие практики для определения состояния в функциональном компоненте React

Question

Я встречал 2 способа определения состояния в компонентах функций в React. Я не мог понять, в чем разница.

Первый вариант:

export function TestComponent() {
const [state, setState]: [string, Function] = React.useState('');
}

Второй вариант:

export function TestComponent() {
const [state, setState] = React.useState<string>('');
}

Оба работают, но что лучше вариант использовать? Я предпочитаю использовать второй вариант, просто потому, что он короче.

Answer 1

Этого вполне достаточно:

const [state, setState] = React.useState('');

Обратите внимание, что вам даже не нужна деталь <string>, если вы поставляете инициализатор.

Если бы она была более сложной, например, string|null, вам может понадобиться:

const [state, setState] = React.useState<string|null>(null);

... но если это всегда строка, нет необходимости.

Answer 2

Вы можете использовать это, и это отлично работает в реакции:

const [state, setState] = React.useState('');

В TypeScript React полезно определять типы

const [state, setState] = React.useState<string>('');

Answer 3

Они одинаковы, и есть также метод, предложенный TJ. Между ними нет никакой разницы. Единственное отличие будет в том случае, если вы хотите инициализировать состояние как нулевое, а затем изменить его на строковое, в этом случае использование

const [state, setState] = React.useState('')

недостаточно.