хотя если погуглить, то пару упоминаний на SO можно найти
суть в том, что иногда надо в компонент передать функцию
например, кнопке условный хэндлер onClick
но кнопок несколько, и под каждую создавать отдельную функцию не хочется
можно сделать хэндлер вида handleClick = (arg) => (event) => { ... } и в компоненте его юзать типа <button onClick={this.handleClick(arg)} />
но тогда для каждой кнопки при каждом рендере функция будет создаваться по-новой, и кнопка будет перерендериваться
в доках по реакту описано, что для избежания перерендера можно использовать dataSet типа <button data-arg={arg} onClick={this.handleClick} /> и handleClick = (event) => { const { arg } = event.currentTarget.dataSet; ... }
но это мало того, что многословно, так еще и работает только для тех функций, которые принимают ивенты
другой путь -- юзать мемоизацию
вместо handleClick = (arg) => (event) => { ... } просто написать handleClick = memoize((arg) => (event) => { ... }) (memoize взять, например, из lodash/memoize)
и юзать его так же, как в первом примере
но вместо каждый раз разных функций, возвращаться будут те же самые функции, тем самым, перерендера не будет
норм идея или что-то пойдет не так?
На мемоизации потеряешь больше времени
Чот ты усложняешь очень. Просто напиши хок и реакт за тебя сам мемоизировать будет.
Мемоиз лучше не это самое
Обсуждают сегодня