For lessons - Best practices of React.md

Redux

Обновление без сохранения исходной позиции в массиве (индекса)

return {
  ...state.items,
  {
     ...item,
     count: item.count++
  }
}

Обсновление с сохранением исходной позиции в массиве (индекса)

.map(item => item.id === id ?
  {
    ...item,
    count: item.count++
  } : item
)

Удаление

.filter(item => item.id !== id)

Деструктуризация параметров функции

const dict = {
  duck: 'quack',
  dog: 'woff',
  mouse: 'squick',
  hamster: 'squick'
}

const res = Object.entries(dict)
  .filter(([, value]) => value === 'squick')  // {mouse: ''}, {humster: ''}
  .map(([key]) => key)  //  ['mouse', 'humster']

function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'})
}
 // to ES+
function updateColorMap(colormap) {
  return {...colormap, right: 'blue'}
}

this.setState(prevState => ({
  words: [...prevState.words, 'marklar'],
}))

this.setState({
  counter: this.state.counter + this.props.increment; // Может не сработать 
});
   // right way
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}))

https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f https://medium.com/@ohansemmanuel/how-to-eliminate-react-performance-issues-a16a250c0f27

В обоих случаях создается новая функция с новым идентификатором. Так же, как с массивом литерал. Вы должны связать функцию раньше:

// Создает всегда новый объект при рендере
update(value) {
  this.props.update(value);
}
render() {
  <MyInput onClick={(e) => this.update(e.target.value) } />
  <MyInput onChange={this.update.bind(this, value)} />
}


// Не создает нового объекта при рендере
class App extends PureComponent {
  constructor(props) {
    super(props)
    // Один раз создается привязка при создании класса, каждый рендер будет использовать ее
    this.update = this.update.bind(this)
  }
  update(e) {
    this.props.update(e.target.value)
  }
  
  // ES2018+
  // right way. Не создает новый контекст, использует лексический
  const update = (e) => {
    this.props.update(`${e.target.value} ${App.myFync}`)
  }
  
  // ES2018+
  state =  {}
  
  static myFync = a => a * 2
  
  render() {
    return <MyInput onChange={this.update} />
  }
}

Как вы должны знать, литерал массива такой же, как new Array (), который создает новый экземпляр массива. Это полностью уничтожило каждую чистую оптимизацию рендеринга внутри элементов Cell. В Javascript разные экземпляры имеют разные идентификаторы, и поэтому поверхностная проверка на равенство всегда выдает false и говорит React перерисовать компоненты.

const default = []

class Table extends PureComponent {
  render() {
    return (
      <div>
        {this.props.items.map(i =>
          // Bad way
          <Cell data={i} options={this.props.options || []} />
          
          // rigth way
          <Cell data={i} options={this.props.options || default} />
         )}
       </div>
     );
  }
}

Используй Reselect c Redux https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f

alexmasyukov/For lessons - Best practices of React.md