Как предотвратить ненужное повторное рендеринг функций без гражданства?

Question

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

Как я должен оптимизировать свое приложение до рендеринга и использовать функции без гражданства?

Answer 1

Используйте функцию высшего порядка:

function once(fn) { 
    let called = false; 
    let result = null; 
    return function() { 
    if(!called) { 
     called = true; 
     result = fn.apply(null, arguments); 
    } 
    return result; 
    }; 
} 

const DumbComponent = once(() => { 
    console.log("Rendering dumb component"); // will only ever happen once 
    return (<div>I am a component</div>); 
}); 

CodePen