How to fade in-out text in react

View the demo here


We will go through the following steps

  1. Add CSS
  2. Create Fader Component
  3. Fade in-out logic
  4. Cleanup side effect


Let’s start by adding CSS which will help us in achieving the fade-in-out effect.

.fade-in {
transition: opacity 1s ease;
.fade-out {
opacity: 0;
transition: opacity 1s ease;

The class names are self-explanatory!

Create Fader Component

We create a reusable component and name it Fader. This component will include the UI + business logic to achieve the fade-in-out.

Define props

  • This component will take in a text prop, which is of type string
  • We also assign a default value to the text prop
Fader.defaultProps = {
    text: 'Hello World!'

Fader.propTypes = {
    text: PropTypes.string,
  • Import the CSS file, inside the component (in our case App.css)

Initial State

  • We import the useState hook from React.
  • Set the initial value of our property to fade-in 
Set initial state
Set initial state
  • We make use of this property and assign it to our classname of Html element.
return (
<h1 className={fadeProp.fade}>{text}</h1>

fadeProp.fade: Is the CSS class name

text: Is the Fader property

Fade in-out logic

Let’s bring in the useEffect hook

The useEffect(callback, [prop, state]) invokes the callback after the changes are being committed to DOM and if and only if any value in the dependencies array [prop, state] has changed.

useEffect(() => {
     const timeout = setInterval(() => {
        if (fadeProp.fade === 'fade-in') {
                fade: 'fade-out'
        } else {
                fade: 'fade-in'
     }, 4000);

return () => clearInterval(timeout)
}, [fadeProp])
  • We use the setInterval which takes in the callback and duration (4 sec in our case)
  • Inside the setInterval callback, we check for the current css classname
  • Since we assigned the initial class as fade-in we check for that and change the class accordingly
  • Note the callback or the if/else executes every 4 seconds

Cleanup side effect

If the callback of useEffect(callback) returns a function, then useEffect() considers this as an effect cleanup:

return () => clearInterval(timeout)
  • We add this line for effect cleanup.
  • This cancels the previous timer before starting a new one.

Cleanup works the following way:

  1. After initial rendering, useEffect() invokes the callback having the side effect. In our case, timeout 

2. On later renderings, before invoking the next side-effect callback, useEffect() invokes the clearInterval function from the previous side-effect execution then runs the current side-effect.

3. Finally, after unmounting the component, useEffect() invokes the clearInterval function from the latest side-effect

Hosted URL:

Source code

Valuable comments