在className更改时ReactJS组件意外重新加载

Question

TLDR;
Does adding a className to an exciting div reload the parent component in ReactJs ? Added images near button to show console.log being called multiple times.

Here is the bug..

I'm building a simple 'order' app, which includes a sidebar.

I recreated the sidebar in a new project for a sanity check. Same issues. Here is the simple version.

class App extends Component {
  constructor() {
    super();
    this.state = {
      addList : [],
    }
  }
  render() {
    return (
      <div className="App">
        <Sidebar list = {this.state.addList}/>
      </div>
    );
  }
}

export default App;

and in the sidebar component

class Sidebar extends Component {
    constructor(props){
        super(props);
        this.state = {
            active : false
        }
    }
    toggleSidebar () {
        if (this.state.active) {
            this.setState({
                active : false
            })
        } else {
            this.setState({
                active: true
            })
        }
    }
    render () {
        return (
            <div className={ 'sidebar ' + ((this.state.active) ? '' : 'hidden')}>
                <button className='tab' onClick={(e)=>{this.toggleSidebar()}}>
                        TAB
                </button>
                <div className="itemList">
                    {console.log(this.props.list)}
                </div>
            </div>
        )
    }
}

export default Sidebar;

The sideBar class has a position: fixed and I move it out of the screen on a button click and adding a hidden className ( .hidden { right: -x } )

When an item gets selected in the parent app component, it gets added to its state ( addItem ).

The Sidebar component has that property passed into so when addItem get a new item, it displays it. It works just as predicted. I was able to add items and display them no problem.

I noticed the bug when I started adding number and doing price totals etc, because it seems the sidebar keep rendering I would find myself getting caught in infinite setState loops

Any solutions or advice?

Images for a those that are visual (clicking the tab and console displaying):

Answer 1

The answer is simple, I'm foolish. In fact I AM changing the state of sidebar causes a reload.

Therefor to get around this is having the parent component hold the values and pass them down as properties for the sidebar to just display. Therefor on reload the values don't change or re-add.