Повышаем производительность в компонентах-функциях React с помощью React.memo ()

[Dreyk]

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

[bano-notit]

не нравится мне движение реакта. от классов и методов мы все ближе и ближе к бесконечному количеству переменных в скоупе, которые хрен потом прочтешь. от extend мы все ближе и ближе к бесконечному количеству hoc.

будущее ужасно…

[serf]

Не связанные напрямую 10 функциий лучше поддаются тришейкингу чем класс в который жестко зашито 10 аналогичных методов.

[serf]

Когда свойства и состояние компонента меняются, React сравнивает предыдущие и текущие свойства и состояния компонента. И только если они неидентичны, компонент-функция перерисовывается.

Думаю стоило бы добавить в стутью это раз уже дело пошло по сути о переводе официальной документации а то те кто «учится» только по подобным статьям упустят важные детали reactjs.org/docs/react-api.html#reactmemo:

By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

Мое мнение что проще почитать здесь кому нужно на русском ru.reactjs.org/docs/react-api.html#reactmemo

PS React постепенно добавляет то что в Angular было сделано изначально, видимо Virtual DOM штуковина не стала серебрянной пулей как некоторые почему-то предполагали.

[vlviking]

const Funcomponent = () => {
    return (
        <div>
            Hiya!! I am a Funtional component
        </div>
    )
}
export default React.memo(FunComponent)

Значит стоит обворачивать все функции при export? Есть ли в этом решении какие либо минусы?

[serf]

Минусы есть. Я очень не люблю когда используются default экспорты, даже иногда просто ненавижу, и многие придерживаются такого же мнения. default экспорты нужно перманентно забанить везде и навсегда.

export const Funcomponent = React.memo(() => {
  return <div>Hiya!! I am a Funtional component</div>;
});

[YNile]

Никогда не задумывался над данным вопросом.
Почему? Можете озвучить несколько причин?

[serf]

www.google.com/search?q=stop+using+default+export

[Zeloff]

Ты забыл упомянуть, что React.memo вторым аргументом принимает функцию, в которой можно также, как и в sCU сравнивать prevProps и nextProps, возвращать при этом уже true, если перерисовка не нужна

[serf]

Это перевод плохой статьи.

[Valery4]

Я прошу прощения. Но после

        if (this.state.count === nextState.count) {
            return false
        }
        return true

желание читать дальше отпало совсем.
Хотя бы:

        return this.state.count !== nextState.count