CODEWITHSUNDEEP
javascriptreactjsreact-hooks
tipos
tipos

Reputation: 432

How to 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?

Upvotes: 3

Views: 15315

Answers (5)

Maulana Irsyad
Maulana Irsyad

Reputation: 46

separate form into different component.

<Modal>
<YourForm />
</Modal>

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

Upvotes: 0

Rahul Dasgupta
Rahul Dasgupta

Reputation: 809

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>
        );
    }
}

Upvotes: 0

Duke Dougal
Duke Dougal

Reputation: 26376

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 component 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.

Upvotes: 1

Sydney Y
Sydney Y

Reputation: 3152

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.

Upvotes: 1

Alexander Elert
Alexander Elert

Reputation: 150

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

Upvotes: 0

Related Questions