# Animate React component by calling 'setState' in 'componentDidMount'

DevFeed: [Animate React component by calling 'setState' in 'componentDidMount'](<https://devfeed.tech/articles/animate-react-component-by-calling-setstate-in-componentdidmount-37337.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/react-rerender-in-component-did-mount/>)

Author: Stanko

Published: 2017-06-23T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [React UI animations](<https://devfeed.tech/topics/react-ui-animations.md>), [how to create smooth CSS transitions](<https://devfeed.tech/topics/how-to-create-smooth-css-transitions.md>), [CSS](<https://devfeed.tech/topics/css.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>)

## AI overview

A tutorial explains why changing a React component's state in componentDidMount may fail to produce a CSS transition. It attributes the behavior to browsers merging changes made within the same animation frame, and discusses using a timeout or animation-frame approach to separate the rendered states, including inconsistent Firefox behavior.

## Source excerpt

On the frontend, we do a lot of animations. Most of the simple animations I create by using CSS transitions. Either I will change class or inline style of the element, and define transitions in CSS file. Easiest way to do this in React is to render initial state, and then when it renders, change the state to apply class or style to animate. The easiest way to do it in React is to change state in componentDidMount. Setting state in componentDidMount is considered to be anti-pattern, as it forces rerender and can lead to property/layout thrashing. But in our case, that is exactly what we want to do. When we do that, we hit the wall - only second state is rendered and there is no transition between two states. It happens because of browsers optimization - browsers are not rerendering stuff that changed in the same animation frame. But they merge changes and render the end result. The problem I just described is not React exclusive, but browser related. Same will happen if we try something like this: const element = document.querySelector('.AnimateMe'); element.style.height = '50px'; element.style.height = '250px'; So let's start with example of the problem. Animate component by changing state in componentDidMount doesn't work # The scenario I described above. Element height depends on this.state.animation property. It is initially set to false and element height should be 50px. In componentDidMount we'll change the value of this.props.animation to true and element height should be 250px. As we added transition, it should animate. But it doesn't as all of this happens really fast, and browser decides to merge changes and render only the end result. This way our element immediately gets height of 250px. import React, { Component } from 'react'; export default class AnimateMe extends Component { constructor(props) { super(props); this.state = { animate: false, }; } componentDidMount() { this.setState({ animate: true }); } render() { return ( <div style={ { background: '#e