Chat - React.memo()

This post was migrated from Tistory. You can find the original here.

const Messeges = () => {
        <>
            <S.Messages>
                {
                    reMsgArr.map((v: responseMsgDto[], idx) => {
                        return <Message key={idx} responseMsgArr={v} />
                    })
                }
                <div ref={chatRef}></div>
            </S.Messages>
            <S.InputDiv>
                <S.TextArea
                    value={inputMsg}
                    onChange={(e: any) => setInputMsg(e.target.value)}
                    onKeyDown={keyDownHandler}
                />
                <S.Send>
                    <S.SendBtn
                        onClick={sendHandler}>
                        Send
                    </S.SendBtn>
                </S.Send>
            </S.InputDiv>
        </>
    }

With the structure above, changing the textArea triggers setInputMsg, which re-renders Messages, and Message re-renders along with it.

The Message component has nothing to do with the inputMsg value, so there’s no reason for it to re-render.

export default memo(Messege);

So we export it wrapped with React.memo like this.

Now Message no longer re-renders when the textArea changes.