State change event inside render function is getting called when a different state is changed

Question

I'm new to react. So for me when some react states get updated. All other state change event inside my return function gets called.

For example :

My State :

  state = {
    isLogined  : false,
    redirect: false,
    username: "",
    avatar : '',
    name : '',
    messages : [],
    feeds : [],
    activechat : {},
    currentRoom : '',
  }

So I'm listening a firebase database with child_added event and updating my feeds state by using the following code,

this.setState({
            feeds : topics
          })

It works fine for the feeds component. But all other component associated with other states are getting called again,

  <HomeBar avatar={this.state.avatar} />

and

<Card className={"middleContainer"}>
                {this.getChatBox(this.state.activechat)}
          </Card>

So how can i fix that :(

Pastebin for Home and HomeBar

https://pastebin.com/R4G2YCmY

Which type of component did you use? Can you show the entire component that contains the above state? — Cuong Vu, May 21 '18 at 17:58
@VuHuuCuong I have added my code to this pastebin https://pastebin.com/R4G2YCmY — Bucky, May 21 '18 at 18:08
For testing I have added that console.log(props) to HomeBar. And it's calling everytime some change in state occurs — Bucky, May 21 '18 at 18:10

score 0 · Answer 1 · answered May 21 '18 at 18:31

0

By default, whenever a component is dirty (its state changed), that component and its children are re-rendered. See -> https://stackoverflow.com/a/24719289/2092817

answered May 21 '18 at 18:31

naveen chandru

98
5

State change event inside render function is getting called when a different state is changed

1 Answers1