On my hero section, I have implemented some animations using framer.motion that I only want to display on the initial load.

To achieve this, I attempted to use useState and useEffect along with local storage to keep track of whether or not the animations should be displayed.

Although the useEffect function successfully updates the local storage value, the hero section continues to display the animations as if the useState value had not changed.

    async function Hero() {

    const [animate, setAnimate] = useState(true);

    useEffect(() => {
        if(localStorage.getItem('animate') != null){
             localStorage.setItem('animate', 'false')
             setAnimate(false)
          }else{
             localStorage.setItem('animate', 'true')
          }
        }
    }, []);

  return (
     <div>
     <motion.h1 animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}}>Some text</motion.h1>
     </div>
    )
}

export default Hero

Despite setting 'animate' in local storage to true on the first load and then switching it to false, the animation does not reflect this change.

I conducted a simple test to rule out any issues with the framer code, but the problem persists.

{animate == true?<h1>True</h1>:<h1>False</h1>}

Even after adjusting the dependencies array, the issue remains unresolved.

Modifying the code shown below still does not resolve the problem:

async function Hero() {

const [animate, setAnimate] = useState(true);
console.log(animate)

useEffect(() => {
        if(localStorage.getItem('animate') != null){
            localStorage.setItem('animate', 'false')
            setAnimate(false)
        }else{
            localStorage.setItem('animate', 'true')
        }
}, []);

Initially, the console logs true, but upon navigating away and returning, it repeatedly switches between true and false (almost like a constant loop).

Any suggestions or insights are appreciated?

Edit

Below is the complete code for the component. This component resides within a directory named components inside the app directory.

Strangely, adding a useEffect to this component causes severe performance issues and even crashes the window.

 'use client'
import {React, useState, useEffect} from 'react'
import Link from 'next/link'
import { IoIosPin } from "react-icons/io";
import { IoMdBus } from "react-icons/io";
import { motion } from "framer-motion"

export default async function Hero() {

    const [animate, setAnimate] = useState(true);

    useEffect(() => {
        if(localStorage.getItem('animate') != null){
             localStorage.setItem('animate', 'false')
             setAnimate(false)
          }else{
             localStorage.setItem('animate', 'true')
          }
        },[])


  return (
    <div className='px-2 pt-3 mdl:px-8 lgl:px-12 xl:px-16'>
        <div className='relative w-full bg-[url("/hero/cabinet-paysage.jpg")] bg-cover bg-center bg-no-repeat sml:min-h-[300px] mdl:min-h-[400px] lg:min-h-[450px] lgl:min-h-[500px]'>
            <motion.div className="w-full h-full bg-bgwhite sml:min-h-[300px] mdl:min-h-[400px] lg:min-h-[450px] lgl:min-h-[500px]" animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{ease: "linear", duration:0.5}}>
                <div className=' w-full h-full max-w-[1000px] sml:min-h-[300px] mdl:min-h-[400px] p-5 mx-auto grid grid-cols-1 grid-rows-8 auto-rows-fr auto-cols-fr sml:grid-cols-3 sml:grid-rows-2'>
                    <div className='row-span-4 flex flex-col justify-center gap-3 mdl:gap-4 lg:gap-5 xl:gap-6 sml:col-start-1 sml:col-end-3 sml:row-span-2 '>
                        <motion.h1 animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.2, ease: "linear", duration:0.3}}>Some text</motion.h1>
                        <motion.h2 animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.4, ease: "linear", duration:0.3}}>Some text</motion.h2>
                        <motion.p className='sml:max-w-[450px] headertext' animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.6, ease: "linear", duration:0.3}}>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte et</motion.p>
                    </div>
                    <div className='row-span-3 flex flex-col justify-center items-center gap-2 sml:col-start-3 sml:row-span-2'>
                        <div className='flex justify-center gap-4'>
                            <motion.div className='flex flex-col items-center w-24 text-center' animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.2, ease: "linear", duration:0.3}}>
                                <IoIosPin className='reacticons'/>
                                <p className='headertext'>Some text</p>
                            </motion.div>
                            <motion.div className='flex flex-col items-center w-24 text-center' animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.4, ease: "linear", duration:0.3}}>
                                <IoMdBus className='reacticons'/>
                                <p className='headertext'>Some text</p>
                            </motion.div>
                        </div>
                        <Link href="/#contact" className='buttonheader inline-block text-center self-center'>
                            Prendre Rendez-Vous
                        </Link>
                    </div>
                </div>
            </motion.div>

        </div>
    </div>
  )
}