REACT_LIB Telegram 680
🎯 ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ Ρ€Π΅Ρ€Π΅Π½Π΄Π΅Ρ€ΠΎΠ² Π² React Ρ‡Π΅Ρ€Π΅Π· ΠΌΠ΅ΠΌΠΎΠΈΠ·Π°Ρ†ΠΈΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ

МногиС Π·Π½Π°ΡŽΡ‚ ΠΏΡ€ΠΎ React.memo, Π½ΠΎ часто Π·Π°Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡ€ΠΎ useCallback β€” ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ лишниС Ρ€Π΅Ρ€Π΅Π½Π΄Π΅Ρ€Ρ‹, особСнно Π² списках ΠΈ слоТных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ….

πŸ“Œ ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°:


const handleClick = () => {
console.log('Clicked');
};

<MyButton onClick={handleClick} />


Π’Π°ΠΊΠΎΠΉ handleClick создаётся Π·Π°Π½ΠΎΠ²ΠΎ ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Ρ€Π΅Π½Π΄Π΅Ρ€Π΅. Если MyButton ΠΌΠ΅ΠΌΠΎΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ (React.memo), это сломаСт ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ β€” пропсы-Ρ‚ΠΎ измСнились!

βœ… РСшСниС:


const handleClick = useCallback(() => {
console.log('Clicked');
}, []);


πŸ“ˆ ΠŸΡ€ΠΎΡ„ΠΈΡ‚: Ѐункция сохраняСтся ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π΅Π½Π΄Π΅Ρ€Π°ΠΌΠΈ, MyButton Π½Π΅ рСрСндСрится Π±Π΅Π· ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹.

🧠 ОсобСнно ваТно для:

* ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² списках (map)
* ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² с большим числом ΠΊΠΎΠ»Π»Π±Π΅ΠΊΠΎΠ²
* ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… UI (Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π΄Π°ΡˆΠ±ΠΎΡ€Π΄Ρ‹, Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ)

πŸ’‘ Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ eslint-ΠΏΠ»Π°Π³ΠΈΠ½ react-hooks/exhaustive-deps β€” ΠΎΠ½ Π½Π΅ даст Π·Π°Π±Ρ‹Ρ‚ΡŒ зависимости.

✍️ @React_lib



tgoop.com/React_lib/680
Create:
Last Update:

🎯 ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ Ρ€Π΅Ρ€Π΅Π½Π΄Π΅Ρ€ΠΎΠ² Π² React Ρ‡Π΅Ρ€Π΅Π· ΠΌΠ΅ΠΌΠΎΠΈΠ·Π°Ρ†ΠΈΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ

МногиС Π·Π½Π°ΡŽΡ‚ ΠΏΡ€ΠΎ React.memo, Π½ΠΎ часто Π·Π°Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡ€ΠΎ useCallback β€” ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ лишниС Ρ€Π΅Ρ€Π΅Π½Π΄Π΅Ρ€Ρ‹, особСнно Π² списках ΠΈ слоТных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ….

πŸ“Œ ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°:


const handleClick = () => {
console.log('Clicked');
};

<MyButton onClick={handleClick} />


Π’Π°ΠΊΠΎΠΉ handleClick создаётся Π·Π°Π½ΠΎΠ²ΠΎ ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Ρ€Π΅Π½Π΄Π΅Ρ€Π΅. Если MyButton ΠΌΠ΅ΠΌΠΎΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ (React.memo), это сломаСт ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ β€” пропсы-Ρ‚ΠΎ измСнились!

βœ… РСшСниС:


const handleClick = useCallback(() => {
console.log('Clicked');
}, []);


πŸ“ˆ ΠŸΡ€ΠΎΡ„ΠΈΡ‚: Ѐункция сохраняСтся ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π΅Π½Π΄Π΅Ρ€Π°ΠΌΠΈ, MyButton Π½Π΅ рСрСндСрится Π±Π΅Π· ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹.

🧠 ОсобСнно ваТно для:

* ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² списках (map)
* ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² с большим числом ΠΊΠΎΠ»Π»Π±Π΅ΠΊΠΎΠ²
* ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… UI (Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π΄Π°ΡˆΠ±ΠΎΡ€Π΄Ρ‹, Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ)

πŸ’‘ Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ eslint-ΠΏΠ»Π°Π³ΠΈΠ½ react-hooks/exhaustive-deps β€” ΠΎΠ½ Π½Π΅ даст Π·Π°Π±Ρ‹Ρ‚ΡŒ зависимости.

✍️ @React_lib

BY React




Share with your friend now:
tgoop.com/React_lib/680

View MORE
Open in Telegram


Telegram News

Date: |

Matt Hussey, editorial director of NEAR Protocol (and former editor-in-chief of Decrypt) responded to the news of the Telegram group with β€œ#meIRL.” There have been several contributions to the group with members posting voice notes of screaming, yelling, groaning, and wailing in different rhythms and pitches. Calling out the β€œdegenerate” community or the crypto obsessives that engage in high-risk trading, Co-founder of NFT renting protocol Rentable World emiliano.eth shared this group on his Twitter. He wrote: β€œhey degen, are you stressed? Just let it out all out. Voice only tg channel for screaming”. With the sharp downturn in the crypto market, yelling has become a coping mechanism for many crypto traders. This screaming therapy became popular after the surge of Goblintown Ethereum NFTs at the end of May or early June. Here, holders made incoherent groaning sounds in late-night Twitter spaces. They also role-played as urine-loving Goblin creatures. A Hong Kong protester with a petrol bomb. File photo: Dylan Hollingsworth/HKFP. The Standard Channel
from us


Telegram React
FROM American