Fade in-out text in react

In case it helped :)

View the demo here

Website: https://funwithreact.web.app/

We will go through the following steps

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

Add CSS

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

• 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') {
           setFadeProp({
                fade: 'fade-out'
           })
        } else {
             setFadeProp({
                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

In case it helped :)

Source code.

Website: https://funwithreact.web.app/