React efficiency using CSS class or render state change?

Question

This is more of a React performance question.

My question would be, adding/removing a CSS classname (I.e. Adding "show" class name) to an element is better via DOM manipulation or state change? I do find that direct DOM manipulation "classList" is definitely faster when the targeted DOM element is already known.

A snippet would be:

const menuRef= React.createRef();

constructor(props) {
   super(props);
   /*if I am to use state*/
   //this.state = {isMenuShown: false}
}

_toggleShow = () => {
   //Changing states?
   /* this.setState({isMenuShown: !this.state.isMenuShown}); */
   if(this.menuRef.current) {
     if(!this.menuRef.current.classList.contains("show")) {
       this.menuRef.current.classList.add("show");
     }
     else {
       this.menuRef.current.classList.remove("show");
     }
   }  
}

render() {
  let ulClassName = "";
  /* If I am to use state*/
  //ulClassName = this.state.isMenuShown ? "show":"";
  return (
    <React.Fragment>
      <nav onClick={this._toggleShow)>
        <ul ref={this.menuRef} className={ulClassName}>
          <li>Sample 1</li>
          <li>Sample 2</li>
        </ul>
      </nav>
      <style jsx>{`
       ul {
          display: none;
       }
       ul.show {
          display: block;
          //I can add CSS @keyframes to display
          //Inner child elements relies on ".show" too for responsive design.
       }
     `}</style>
  </React.Fragment>
);

}

I know that states are the advised way to go, but scenario above justifies(at least to me) that DOM manipulation is better when CSS are heavily relied on. Take example for the CSS usage are:

Inner child responsive designs.
Animation using CSS @keyframes

What would you really use or how does one over come this? In future did DOM manipulation actually create a problem for anyone?

Let React handle this for you as the reconciliation engine does all the heavy lifting to optimize updates. reactjs.org/docs/reconciliation.html. I'd recommend reading up on refs and when to use them. reactjs.org/docs/refs-and-the-dom.html — Dennis Martinez
– Dennis Martinez, Commented Nov 17, 2018 at 3:00
Thanks Dennis, I had read it and wow this is really really the answer I need. Now I get why states are the way to go and will go through the whole React Advanced section. — Han
– Han, Commented Nov 17, 2018 at 10:58

Drew Reese · Accepted Answer · 2018-11-17 02:36:02Z

2

I believe directly manipulating DOM elements within react is an anti pattern. It's doable, but not recommended.

As a side note, I use a node module named classnames to help toggle rendered elements that is used right on the className prop. It does this by handling the adding or removing of classes based on logic you provide.

answered Nov 17, 2018 at 2:36

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Han Over a year ago

Ah that's a nice add on to classnames. I had give thoughts to the anti-pattern, but re-rendering cause a lot of over head to rewrite to the browser.

Collectives™ on Stack Overflow

React efficiency using CSS class or render state change?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related