CODEWITHSUNDEEP
javascriptreactjs
Rafal Lesniak
Rafal Lesniak

Reputation: 556

React adding css class without rerender

In my project I have table, each row has his own class depends on state. I also have sticked columns so when I do horizontal scroll then some columns are fixed.

My problem is that when some state is changing (eg. from none to rejected) i need to mark this row as rejected className and change background color.

Using setState is problematic because whole row is rerendered so my sticky columns are gone (I do calculations on every scroll event).

The question is: is there any other solution to change react className without rerendering my row? (besides jQuery)

Upvotes: 7

Views: 7133

Answers (2)

Rafal Lesniak
Rafal Lesniak

Reputation: 556

Yeah, I found solution. My each cell in a row has its own component. As you know each element which is creating from array needs to have key prop. 

return (
  <tr>
    {cells.map(cell => (<td key={_.uniqueId()}>{cell.val}</td>))
  </tr>
)

I used to be passing lodash's _.uniqueId() value - this was causing my problem. The solution was to replace this unique id with some uniqe string, in my case combiation of two IDs and column name.

So final solution looks like:

return (
  <tr>
    {cells.map(cell => {
      const keyId = `${row.id}${cell.id}${cell.name}`
      return (<td key={keyId}>{cell.val}</td>})
    }}
  </tr>
)

Here is explanation why it was destroying and rerendering again: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Upvotes: 0

zackify
zackify

Reputation: 5434

Change the state in your Row component so that the class is updated. Then, use PureComponent (https://github.com/facebook/react/pull/7195) on your child components so that they will not rerender unless their own props changed. Does that solve your problem?

Upvotes: 1

Related Questions