CODEWITHSUNDEEP
javascriptjqueryreactjsreact-hooksuse-state
Sohel Shekh
Sohel Shekh

Reputation: 301

How to run a function everytime the page loads in React

I have a function that takes the height of one element and sets the same height to the other element.

So my plan is to run this function everytime whenever the page loads to the user/refreshed and whenever the window is resized.

    // Nav Components Resize Logic
    function resizeNavComponent() {
      let naver = $(".naver");
      let mainNavDiv = $(".main_Nav");
      let menubar = $(".menubar");
      let naverHeight = naver.outerHeight();
      console.log(naverHeight);

      // Set height of mainNavDiv and top of menubar as of naver
      mainNavDiv.height(naverHeight);
      $(menubar).css({ top: naverHeight });
    }

I saw some post telling use useState but as a beginner in React, I'm kinda confused on how to use it in my Code

I am using React Class Component!

Upvotes: 0

Views: 3866

Answers (1)

Aniket Agarwal
Aniket Agarwal

Reputation: 308

You can use useState hook and store the values of the page dimensions and make use of the useEffect hook to run a function everytime the page loads or the state changes

const [dimensions, setDimensions] = useState(pageDimensions)

useEffect(() => {
    // the function you want to call
}, [dimensions])

So the flow is - you first have to calculate the page's dimensions and set it as the initial value of the state. Then whatever function you want to call everytime the page loads or resizes, write in inside the useEffect hook function. And finally make another function or use useEffect where you can check whenever the page resizes so that you can set the state to the new dimensions.

Upvotes: 2

Related Questions