how to stop re-render in reactjs?

Question

 case 'splitWord': 
            if(this.props.remedStatus){
                console.log(this.props.remedStatus)
                console.log("remed")
                return(
                   <HotspotRemed 
                        xml={this.receivedXML}
                        userXml={this.usersAnswerXML}
                        correctAnswer ={this.ansString}
                        type={this.splitType}
                    />
                ) 
            } else {
                console.log("reurn word")
                return(
                    
                    <div style ={wrap_style} >
                    {this.forceUpdate}
                        <SplitXMLPreview xml={this.receivedXML}
                            type='w' 
                            assignedSplitContentClick={(contentId, selectionType) => {
                                this.handleSplitContentClick(contentId, selectionType, 'w')
                            }}
                            getCorrectAns={(answers) => {
                                this.correctAnswers = answers
                            }}
                        />
                    </div>
                )
            }
           
            break
            
            
            <<<==NOW HERE IS MY RENDER MEHTOD.==>>>
            
                render() {
        console.log("render")
            return (
                <div className="previewtemplate" style ={template}>
                    {this.templateArea(this.state.templateType)}
                </div>
            );
        
    }
}
            
            

I just simply want that how to stop re-render the component.

I've three button when i click on one button it perform there action.

There is one button. in which i use if else when i click on that button it return false and component false call that is great work fine and when in click on again that button it call true component that is also great work for me but when i click again on button first it call render then in call my component. i want not call render it call my compoenent.

i read some blog they suggest use this.forceupdate. what should i do?Help me.

Answer 1

You can implement custom logic that determines if the component should update (re-render) with the shouldComponentUpdate method.

eg :

shouldComponentUpdate () {
    return false // this will lead to never re-render the component
}

Note that in the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.

Here is a deeper explanation from the documentation.