Telegram Group & Telegram Channel
🔍 Чекни скрытые баги в React: неправильное использование ключей в списках

Если ты рендеришь список компонентов и используешь index в качестве key, будь осторожен — это может привести к непредсказуемым багам UI.

📉 Что может пойти не так:
- Компоненты не будут корректно обновляться при изменении порядка;
- Сохранённое состояние внутри компонентов (например, в инпутах) будет сбиваться;
- Возрастает шанс багов при анимациях и переходах.

📌 Плохо:

{items.map((item, index) => (
<Card key={index} data={item} />
))}


Хорошо:

{items.map((item) => (
<Card key={item.id} data={item} />
))}


🎯 Совет: используй id, UUID или стабильные ключи из данных. Если данных нет — скорее всего, нужно пересмотреть архитектуру.

Подробный разбор от React team:
https://react.dev/learn/rendering-lists#choosing-the-key

✍️ @React_lib



tg-me.com/React_lib/670
Create:
Last Update:

🔍 Чекни скрытые баги в React: неправильное использование ключей в списках

Если ты рендеришь список компонентов и используешь index в качестве key, будь осторожен — это может привести к непредсказуемым багам UI.

📉 Что может пойти не так:
- Компоненты не будут корректно обновляться при изменении порядка;
- Сохранённое состояние внутри компонентов (например, в инпутах) будет сбиваться;
- Возрастает шанс багов при анимациях и переходах.

📌 Плохо:


{items.map((item, index) => (
<Card key={index} data={item} />
))}


Хорошо:

{items.map((item) => (
<Card key={item.id} data={item} />
))}


🎯 Совет: используй id, UUID или стабильные ключи из данных. Если данных нет — скорее всего, нужно пересмотреть архитектуру.

Подробный разбор от React team:
https://react.dev/learn/rendering-lists#choosing-the-key

✍️ @React_lib

BY React


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/React_lib/670

View MORE
Open in Telegram


telegram Telegram | DID YOU KNOW?

Date: |

Telegram today rolling out an update which brings with it several new features.The update also adds interactive emoji. When you send one of the select animated emoji in chat, you can now tap on it to initiate a full screen animation. The update also adds interactive emoji. When you send one of the select animated emoji in chat, you can now tap on it to initiate a full screen animation. This is then visible to you or anyone else who's also present in chat at the moment. The animations are also accompanied by vibrations. This is then visible to you or anyone else who's also present in chat at the moment. The animations are also accompanied by vibrations.

China’s stock markets are some of the largest in the world, with total market capitalization reaching RMB 79 trillion (US$12.2 trillion) in 2020. China’s stock markets are seen as a crucial tool for driving economic growth, in particular for financing the country’s rapidly growing high-tech sectors.Although traditionally closed off to overseas investors, China’s financial markets have gradually been loosening restrictions over the past couple of decades. At the same time, reforms have sought to make it easier for Chinese companies to list on onshore stock exchanges, and new programs have been launched in attempts to lure some of China’s most coveted overseas-listed companies back to the country.

telegram from de


Telegram React
FROM USA