Author avatar

Vivek Kumar

Handling componentDidMount Issue during CSS Transition

Vivek Kumar

  • Sep 16, 2019
  • 7 Min read
  • 12 Views
  • Sep 16, 2019
  • 7 Min read
  • 12 Views
Web Development
React

Introduction

A successful transition in CSS requires an immense amount of precision at each and every step. It is not because the steps are complex in nature, but because even a slight error can actually lead to the redoing of the entire work. When you are working with the CSS transition language in the React framework then it is quite obvious that you can access a good amount of support in terms of React style libraries and props. But it is crucial that the transition in CSS takes place with proper synchronization along with the mounting and unmounting of the component. If it is not done as per the standard process, then it can lead to the creation of bug(s) resulting in a glitch in the final rendered output.

While the CSS transition not functioning with componentDidMount is not a crisis that has arisen lately but it is a problem that has been persisting for quite some time. People who have indulged in the serious business of CSS animation encounter this problem numerous times and could not understand how exactly to deal with the situation. That is the background as to why the sole purpose of this guide is to discuss the key reason why CSS transition fails to work in componentDidMount and then learn about the possible solutions that can ensure that you don’t face such problems in the future. Once you are done with this guide, it is expected that you are going to identify the spots where you are prone to commit mistakes and follow the right method for eliminating the chance of going the same path again. So, let’s get on with the problem and the solution.

CSS Transition in React

Here, we are going to discuss the CSS transition through an example situation where it fails when used with componentDidMount. This will ensure that it is feasible for us to get into the right approach and find an executable solution. We are going to explore the concept of className and how it can actually be used to deal with the situation. Just place the className of an element within the state and then in componentDidMount. In React, when you update the className in order to kick-start the transition, it is possible that it fails to work and the component simply renders with the transitioned state. Speaking in layman’s terms, the className component is not sliding down, rather it appears on the bottom right from the start. It is quite obvious that each and every command that you wrote is going to seem like the standard procedure and there is nothing wrong with that. If you wish to go with the standard code that we actually use in CSS transitions to attempt to see whether it is working in componentDidMount or not, then it is going to look like the following:

1
2
3
4
5
6
7
8
9
10
getInitialState: function() {
  return {
    childClass: 'child'
  };
},
componentDidMount: function() {
  this.setState({
    childClass: 'child low'
  });
},
jsx

The Most Common Reason for Failure

If your CSS transition isn’t functioning in componentDidMount then one of the critical reasons behind it is likely the fact that your Document Object Model (DOM) has not been updated until the point when the component is mounted. It is one of the blunders that happens quite frequently in the world of CSS transitions. The className that you assign via getInitialState is not going to appear in the Document Object Model (DOM) but, rather, will appear in the one that as been set with componentDidMount. You can seek more assistance with ReactCSSTransitionGroup and see how the component mounting is actually done professionally.

Unfinished Drawing of the Component

Many of you may have overlooked it but the browser that you are using for mounting also plays a key role in if it is successful. There is always a chance that componentDidMount has been called for after React gives the transition to the browser, however, the browser might not have done the drawing. Here, it is suggested that you use requestAnimationFrame, in order to make sure that the setState has been called once the browser is done with the drawing of the component.

1
2
3
4
5
componentDidMount() {
  requestAnimationFrame(() => this.setState({
    childClass: 'child low'
  }))
}
jsx

If you are working with jQuery then it is quite possible that the component can be easily mounted and put into function. But in that case, you would be unable to access the remarkable style components and a wide variety of props that React has to offer. That is the reason why we have emphasized understanding the right way of doing things while working on CSS transitions in React.

Another Example

Consider the below JS code where you want to add a show class to the EffectBox component when it is mounted.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 var EffectBox = React.createClass({
   componentDidMount: function () {
     this.show();
     // setTimeout(this.show, 100);
    },

    show: function () {
      $(React.findDOMNode(this)).addClass('show');
    },

    render: function () {
      return (
        <div className="effect-box" >
        <div className="header"></div>
        <div className="content">
        ...
       )
    }
  });
jsx

To overcome this componentDidMount issue, you can wrap this.show() in requestAnimationFrame which acts as a gentle version of timeout as shown:

1
2
3
componentDidMount: function () {
     requestAnimationFrame(()=> {this.show();});  
 }
jsx

Conclusion

When you work around React then you are going to find that there are numerous reasons why a CSS transition might or might not work in the concerned framework. In this guide, we focussed on the most common reasons for failure and how can we overcome them in the simplest way possible. The appearance of className in the DOM, or the unfinished drawing of the component are the main issues which we have addressed in this, guide along with an additional example.

References

You can further refer the following resources which are also used as references for this guide:

0