Усунення типових помилок у React і TypeScript: Практичний посібник

7 Березня 2024 в 18:24 20

Розробка інтерфейсів з використанням React та TypeScript може стати справжнім випробуванням для розробників, особливо коли справа доходить до усунення помилок, що стосуються типізації та змінних стану. Однією з поширених задач є створення компонента пошуку, який реагує на зміни введення користувача та показує відповідні результати. Однак, цей процес може супроводжуватися типовими помилками, такими як неправильне використання атрибутів JSX та проблеми зі змінними стану всередині хука useEffect. Розглянемо докладніше, як усунути ці проблеми та оптимізувати ваш код.

Помилка TS2607: неправильне використання атрибутів JSX

Почнемо з аналізу помилки TS2607, яка виникає, коли компонент JSX не може приймати атрибути через відсутність визначення ‘props’ властивості. Це вказує на те, що TypeScript не може знайти типи для пропсів, які передаються у компонент, що призводить до помилки компіляції. Рішення полягає в явному визначенні типів пропсів для компонентів.

type OptionProps = {
    option: OptionType;
    onClickFoo: (val: OptionType) => void;
    repeats: boolean;
};
const Option: React.FC<OptionProps> = ({ option, onClickFoo, repeats }) => {
    // Компонент логіка та JSX
};

type OptionProps = {

option: OptionType;

onClickFoo: (val: OptionType) => void;

repeats: boolean;

};

const Option: React.FC<OptionProps> = ({ option, onClickFoo, repeats }) => {

// Компонент логіка та JSX

};

Таке визначення дозволяє TypeScript коректно інтерпретувати і використовувати типи пропсів, уникаючи помилки TS2607.

Використання змінних стану всередині useEffect

Другою поширеною проблемою є некоректне використання змінних стану всередині хука useEffect. Це може призвести до неочікуваних поведінок або навіть нескінченних рендерів компонента. Розглянемо наступний код:

useEffect(() => {
    const filteredData = props.data.filter(item =>
        item.name.toLowerCase().includes(inputVal.toLowerCase())
    );
    setDisplayedVal(filteredData);
}, [inputVal]); // Залежність лише від inputVal

useEffect(() => {

const filteredData = props.data.filter(item =>

item.name.toLowerCase().includes(inputVal.toLowerCase())

);

setDisplayedVal(filteredData);

}, [inputVal]); // Залежність лише від inputVal

Такий підхід коректно реагує на зміни inputVal, але що, якщо потрібно реагувати і на зміни інших змінних або пропсів? Важливо правильно визначити залежності у масиві залежностей useEffect, щоб уникнути неочікуваних поведінок.

Оптимізація за допомогою useMemo

Для оптимізації компонентів та уникнення зайвих рендерів використовуйте хук useMemo. Це особливо корисно, коли вам потрібно обчислювати значення на основі пропсів або стану, які не змінюються на кожному рендері. Наприклад:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

1	const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Це дозволяє React запам’ятовувати складний обчислений результат і використовувати його повторно без перерахунку на кожному рендері, до того моменту, поки не зміняться залежності [a, b].

Заключне слово

Усунення помилок, пов’язаних з TypeScript та змінними стану в React, вимагає глибокого розуміння як самого React, так і особливостей TypeScript. Використання строгих типів, правильне управління залежностями хуків та оптимізація рендерів за допомогою useMemo можуть значно покращити продуктивність та надійність ваших додатків. Не забувайте про документацію та спільноту, які можуть стати в нагоді для вирішення навіть найскладніших завдань.