React componentDidMount setState

React
1

리액트 라이프사이클 componentDidMount에서 setState를 사용하지 말라고 되어있는데 한번 사용을 해보았습니다.

리액트는 state값이 변경되면 리렌더링을 하는걸로 알고있습니다.
말 그대로 setState를 하면 렌더링을 하게되죠

그래서 componentDidMount에서 setState를 사용하게되면 두번 렌더링하게 됩니다.

실제로 console을 찍어본 결과 console이 두번찍히는걸 확인했습니다.

그렇다면 componentDidMount에서 setState를 절때로 사용하지 말아야할까요? componentDidMount에서 setState를 사용하면 두번의 console이 찍히는데 두번이 찍히는건 뭔가 좋지 않아서요

그렇다면 componentDidMount에서 setState를 사용해야할때는 어떤식으로 처리를 해줘야할까요?

2

일년 전에 올렸던 글이지만 답변으로 링크 남깁니다.

3

일단 componentDidMount에서 fetch에 setState를 사용해도
console이 두번찍힌다는것입니다.

그리고 소켓같은경우

componentDidMount() {
this.socketEventListener();
}

socketEventListener = () => {
    this.props.io.on(null, (e) => {
        this.setState({chatLog:e.data.reverse(), firstid:e.data[0].date});
    });
};

componentDidMount에서 socket 이벤트를 대기하고 있다가 소켓에서 이벤트가 오면 setState를 하게 되는데요 이렇게 해도 역시 console은 두번찍히게 됩니다. 이럴땐 어떻게 해야하는가요?

4

해당 컴포넌트의 전체 코드를 공유해주시면 함께 원인을 찾아볼 수 있을 것 같아요.

5

shouldComponentUpdate 를 활용하시면 문제가 해결 될 듯합니다.