Комментарии (11)

1. 

   romanere

   22.11.2021 01:47

   #23732441

   +2

   Спасибо за демонстрацию примера, но переменные в коде написаны на русских и английских символах. Если кто-то захочет скопировать и протестировать, у него ничего не выйдет.

   Рабочий код без русских символов

   import React, { useState, useCallback } from 'react';
   
   function Page() {
     const listOfCities = ['Beijing', 'Tokyo', 'Kinshasa', 'Moscow', 'Jakarta'];
   
     const [name, setName] = useState('');
     const [list, setList] = useState(listOfCities);
   
     const handleClick = () => {
       setList([...list, name]);
       setName('');
     };
   
     const handleChange = (event) => {
       setName(event.target.value);
     };
   
     const handleRemoveClick = useCallback(
       (item) => {
         const filteredList = list.filter((listItem) => listItem !== item);
   
         setList(filteredList);
       },
       [list]
     );
   
     console.log('Page render');
   
     return (
       <div>
         <input type="text" value={name} onChange={handleChange} />
         <button onClick={handleClick}>Add</button>
         <CitiesList list={list} onRemoveClick={handleRemoveClick} />
       </div>
     );
   }
   
   export const CitiesList = React.memo(({ list, onRemoveClick }) => {
     console.log('List render');
   
     return list.map((item) => {
       return <City key={item} city={item} onRemoveClick={onRemoveClick} />;
     });
   });
   
   export const City = ({ city, onRemoveClick }) => {
     const handleCityClick = () => onRemoveClick(city);
   
     console.log('City render');
   
     return <div onClick={handleCityClick}>{city}</div>;
   };
   
   export default Page;

   
   

   1. 

      Roman9131 Автор

      22.11.2021 10:38

      #23733179

      @romanere Спасибо за внимательность, поправил переменные

1. 

   Pavel1114

   22.11.2021 08:00

   #23732729

   +1

   Полезное видео по теме от АйТи-Синяка www.youtube.com/watch?v=2Wp7QPTkpms

1. 

   habrjeka

   22.11.2021 10:23

   #23733119

   +2

   Проблема: производительность - рендер Page и всех его дочерних компонентов каждый раз при вводе в input.

   Причина: вызывается setState в handleChange при onChange input элемента

   Решение: убираем состояние useState() для name;

   без всяких useCallback

   
   import React, { useState } from "react";
   
   function Page() {
     const listOfCities = ["Beijing", "Tokyo", "Kinshasa", "Moscow", "Jakarta"];
   
     const [list, setList] = useState(listOfCities);
     let newItem = "";
     const handleClick = () => {
       setList([...list, newItem]);
       newItem = "";
     };
   
     const handleChange = (event) => {
       newItem = event.target.value;
     };
   
     const handleRemoveClick = (item) => {
       const filteredList = list.filter((listItem) => listItem !== item);
   
       setList(filteredList);
     };
   
     console.log("Page render");
   
     return (
       <div>
         <input type="text" onChange={handleChange} />
         <button onClick={handleClick}>Add</button>
         <CitiesList list={list} onRemoveClick={handleRemoveClick} />
       </div>
     );
   }
   
   export const CitiesList = ({ list, onRemoveClick }) => {
     console.log("List render");
   
     return list.map((item) => {
       return <City key={item} city={item} onRemoveClick={onRemoveClick} />;
     });
   };
   
   export const City = ({ city, onRemoveClick }) => {
     const handleCityClick = () => onRemoveClick(city);
   
     console.log("City render");
   
     return <div onClick={handleCityClick}>{city}</div>;
   };
   
   export default Page;

   Пример в статье подобран неудачно ...

   
   

   1. 

      kahi4

      22.11.2021 11:38

      #23733481

      +2

      А теперь вбейте инпут, удалите город из списка, а потом нажмите add.

      Но согласен, что пример не самый удачный

      
      

      1. 

         habrjeka

         22.11.2021 11:42

         #23733501

         Шах и мат :)

         
         

         1. 

            Roman9131 Автор

            22.11.2021 23:10

            #23736061

            +1

            @habrjeka Спасибо за комментарии, как написано в конце статьи, действительно, данную проблему производительности можно решить путем вынесением поля ввода вместе с его state в отдельный компонент или тем методом который был предложен выше в комментарии. Моя идея была все таки не предложить идеальное решение этой задачи, а показать как можно было бы ее решить при помощи useCallback

   
   

   1. 

      mobilz

      23.11.2021 03:26

      #23736587

      о господи, никогда так не делайте. при любом чихе вы будете обнулять свою переменную и контролировать это никак не получится. т.е. обновился родительский компонент -- обнулили переменную, даже если вы набирали текст в моменте.

      ну и не используйте let, забудьте на годик про let и var, используйте const

      
      

      1. 

         habrjeka

         23.11.2021 08:13

         #23736829

         Вы на 100% правы.

1. 

   strannik_k

   23.11.2021 18:30

   #23739551

   Еще можно в некоторых случаях выносить функции вне компонента, а не помещать их в useCallback. Тогда будет не нужно беспокоиться о лишних перерисовках. К тому же, за счет вынесения кода, большие компоненты станут гораздо читабельнее.

1. 

   skeevy

   01.12.2021 18:38

   #23774393

   const [list, setList] = useState(listOfCities);
   const handleClick = () => {
     setList([...list, newItem]);
   };

   я надеюсь, в проде вы так не делаете, как написали на примере. Разворачивать массив еще раз, да еще и по результирующей переменной вместо использования предыдущего состояния может вам очень больших проблем подкинуть