В последнее время появилось так много новых вещей, которые помогают разработчикам писать лучший код в React. Но, как и во всем, «серебряной пули» не существует. Все имеет свою цену, и нам нужно более разумно оценивать инструменты, которые мы используем.
Итак, давайте начнем…….!!!!!

Компонент высокого порядка

Техника HOC для повторного использования логики компонента в реакции, и в основном HOC — это функция, которая принимает компонент и возвращает новый компонент.
и это очень полезно для повторного использования логики компонента и захвата рендеринга, давайте проверим, например.

const nameHoC = WrappedComponent => {
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                name: ""
            };
        }
        componentDidMount() {
         this.setState({name: "Chirag"});
        }

        render() {
            const {name} = this.state;
            return(
                <div>
                    <WrappedComponent{...this.props} name={name}/>
                </div>
            )
        }
    }
};
export default nameHoC;

Здесь nameHoC — это функция, которая принимает WrappedComponent в качестве аргумента и возвращает совершенно новый компонент, добавляя некоторые новые функции в WrappedComponent. Мы передаем имя в качестве свойства WrappedComponent.

const WishMe ({ name }) => {<h1>Hello {name}! Good morning</h1>}
export default nameHoC(WishMe);

Как вы можете видеть здесь, мы импортировали nameHoC и обернули в него компонент WishMe, nameHoC(WishMe). В WishMe мы используем данные из реквизита, чтобы получить имя человека, которому нужно пожелать.

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

Однако есть проблемы. Основные проблемы с компонентами более высокого порядка включают:

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

React.памятка

React.memo() похож на компонент Pure в том, что он помогает нам контролировать повторный рендеринг наших компонентов.
Основной синтаксис

const wishMeComponent = React.memo(function MyComponent(props) {
    // only renders if props have changed
});

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

использоватьОбратный звонок

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Согласно официальному веб-сайту реагирования, useCallback вернет запомненную версию обратного вызова, которая изменится только в случае изменения одной из зависимостей. Это полезно при передаче обратных вызовов оптимизированным дочерним компонентам, которые полагаются на равенство ссылок, чтобы предотвратить ненужную визуализацию (например, shouldComponentUpdate).
useCallback(fn, deps) эквивалентно useMemo(() => fn, deps).

В приведенном выше примере, если a и b изменяются каждый раз, когда usecallback должен генерировать новую ссылку для функции это накладные расходы, так как нам нужно сравнить предыдущее и следующее значение a и b

Таким образом, в случаях, когда функция либо не вызывает повторную визуализацию, либо всегда вызывает -render (зависит от всех реквизитов), избегайте обертывания вашей функции с помощью `useCallback`.

useMemo

Здесь применимы те же идеи, что и в `useCallback`. Мемоизация может иметь небольшую стоимость, поэтому ее использование в ситуациях, когда зависимости меняются слишком часто, может навредить вам больше, чем вы можете оправдать.

Итак, что мы узнаем из этого?

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

Разработать. Мера. Оптимизировать.

Как однажды сказал Дональд Кнут.

«Преждевременная оптимизация — корень всех зол»

Ссылки
https://reactjs.org
https://medium.com/@sgobinda007/using-reactjs-hoc-pattern-be-aware-of -побочные эффекты-f52beae77703