Question 172793 in Javascript Question posted in
A very good W3school tutorial can be found here.

“What could be causing a React component rendering issue in Javascript?”

There are three buttons home, about and help and added three event handler function that when user click on each button, user should see the expected section. So, here initial state is set to "home".
Problem is when I click about button for the first time it updated correctly and console message is print, but if I click again the about button it again show console message. Also, React Dev Tool tells that component is rendered for clicking the first time.

import { useState } from "react"

export default function Button() {
console.log('Button component rendered');
const [section, setSection] = useState('Home')
    function home() {
        setSection('Home')
    }
    function about() {
        setSection('About')
    }
    return (
        <>
            <div>
                <div>
                    <button onClick={home}>Home</button>
                    <button onClick={about}>About</button>
                </div>
                <p>{section}</p>
            </div>
        </>
    )
}

I found that whenever a state changes the component is re-rendered to update the UI, So,for the first time it renders ok because state is changes from "Home" to "About". But for the second time clicking on the about button it shouldn’t print the console message, but why this is happening, I am very confuse about it…

Tags:

2

Answers


  1. 0

    The issue you are facing is that the component is getting re-rendered every time you click on the every button. This is because the state is getting updated every time you click the button, and when the state changes, React re-renders the component.

    To solve this issue, you can use the useEffect hook to log the console message only once when the component mounts.And you can use a condition so that if the new value is equal to the previous value, the state will not be updated. Here’s an updated version of your code:

     import { useState, useEffect } from "react"
    export default function Button() {

      console.log('Button component rendered');
      const [section, setSection] = useState('Home')

  

    useEffect(() => {
        console.log('Button component mounted');
      }, [])

 

      function home() {
        if (section !== 'Home') {
          setSection('Home')
        }
      }

  

    function about() {
        if (section !== 'About') {
          setSection('About')
        }
      }

 
function help() {
        if (section !== 'Help') {
          setSection('Help')
        }
      }

      return (
        <>
          <div>
            <div>
              <button onClick={home}>Home</button>
              <button onClick={about}>About</button>
              <button onClick={help}>Help</button>
            </div>
            {section === 'Home' && <p>Home section</p>}
            {section === 'About' && <p>About section</p>}
            {section === 'Help' && <p>Help section</p>}
          </div>
        </>
      )
    }
    Login or Signup to reply.
  2. 0 
    import { useState, useEffect } from "react"

export default function Button() {

    const [section, setSection] = useState('Home')

    useEffect(()=>{
        console.log("render on state change")
    },[section])

    function home() {
        setSection('Home')
    }
    function about() {
        setSection('About')
    }
    function help() {
        setSection('Help')
    }

    return (
        <>
            <div>
                <div>
                    <button onClick={home}>Home</button>
                    <button onClick={about}>About</button>
                    <button onClick={help}>Help</button>
                </div>
                <p>{section}</p>
            </div>
        </>
    )
}

    Explanation:
    Now here in this case console will be logged only when state is changed and only once when page is reloded.
    Once the page is reloaded, it will log messages once after that it will not log message until you change the value of your state.

    hope you got what actually is happening.
    comment below if still there’s problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search