I have a react-bootstrap modal with two inputs inside. Modal is displayed when showModal property in the state changes to true. I update the fieldOne property (also inside the state) when input value changes. So, whenever I enter something in the input, modal flashes (re-renders) as well.

How to I prevent Modal from re-rendering when I update the state?

I have a react-bootstrap modal with two inputs inside. Modal is displayed when showModal property in the state changes to true. I update the fieldOne property (also inside the state) when input value changes. So, whenever I enter something in the input, modal flashes (re-renders) as well.

How to I prevent Modal from re-rendering when I update the state?

• javascript
• reactjs
• react-hooks

5 Answers 5

If you don't want a re-render use a variable other than state to hold your data:

constructor (props) {
  super(props);
  this.state = {
    input: ''
  };
  this.holder = '';
}
handleInput(input) {
  this.holder = input;
}
submitInput() {
  this.setState({input: this.holder})
}
render () {
  return (
    <input type="text" onChange={(e) => this.handleInput(e.target.value)} onBlur={() => this.submitInput()} />
  )
}

The purpose of state is for React to evaluate if the DOM needs to change, and if it does it re-renders.

I hit the same problem - putting a form in a modal resulted in the modal rerendering on each keypress.

I could probably get around this by splitting out the form from the modal, BUT I wanted the modal and the form in the same ponent because the modal buttons trigger the form save. Yes there's other ways to handle that too like passing the save function between the split modal and the form, but now it's getting messy.

So my solution was to make the form in the modal uncontrolled. This means that changing the field values does not modify state and therefore the modal does not rerender.

Maybe you should split your modal with the inputs into two seperate ponents. That should fix your rerender issues.

Set the Modal's view condition with separate states solves this issue. Herewith a demo example, I used two seperate states i.e, firstView & secondView

import Modal from 'react-bootstrap/Modal'
import ModalBody from 'react-bootstrap/ModalBody'


class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            demoModal: true,
            firstView: true,
            secondView: false
        };
    };
    render() {
        return (
            <div>
                <Modal scrollable={true} show={this.state.demoModal} fade={false} style={{ display: "block"}}>
                    <ModalBody>
                        <div>
                            {
                                this.state.firstView ?
                                    <div>
                                        ..code
                                    </div>
                                    :
                                    <></>
                            }
                            {
                                this.state.secondView ?
                                    <div>
                                        ..code
                                    </div>
                                    :
                                    <></>
                            }
                        </div>
                    </ModalBody>
                </Modal>
            </div>
        );
    }
}

separate form into different ponent.

<Modal>
<YourForm />
</Modal>

so when your form updated onchange, only YourForm ponent state is updated