CODEWITHSUNDEEP
reactjs
bmayank
bmayank

Reputation: 1

How to check whether React updates dom or not?

I wanted to check how to react does reconciliation so I updated the inner HTML of id with the same text. Ideally, it shouldn't update the dom but it is paint reflashing in chrome.

I have tried paint reflashing in chrome it is showing green rectangle over that same text

import React from 'react';

function App() {
    return (
        <div >
            <p id="abc" key="help">abc is here</p>
            <button onClick={function () {
                // document.getElementById("may").innerHTML = "";
                document.getElementById("abc").innerHTML = "abc is here";

            }} > Btn</button>
        </div>
    );
}

export default App;

Expected result should be that paint reflashing shouldn't happen but it is happening.

Upvotes: 0

Views: 1790

Answers (2)

mgarcia
mgarcia

Reputation: 6325

In React, the output HTML is a result of the state and the props of your component.

When a change in state or props is detected, React runs the render method to check if it needs to update the DOM. So, in order to do this check, you need to store the parameters that determine your view in state or props.

Given your example, we could save the text you want to show in the p tag in the state of your component (using hooks):

import React, { useState } from 'react';

function App () {
    const [text, setText] = useState('abc is here');

    render() {
        return (
            <div >
                <p id="abc" key="help">{this.state.text}</p>
                <button onClick={() => setText('abc is here') }>Btn</button>
            </div>
        );
    }
}

export default App;

If you are using a version of React that does not support hooks, you will need to transform your functional component into a class to use state:

import React, { Component } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { text: 'abc is here' };
    }

    render() {
        return (
            <div >
                <p id="abc" key="help">{this.state.text}</p>
                <button onClick={() => this.setState({ text: 'abc is here' }) }>Btn</button>
            </div>
        );
    }
}

export default App;

Upvotes: 1

Arnaud Christ
Arnaud Christ

Reputation: 3551

You are not using React here to update the text of your p tag but directly updating the DOM with JavaScript.

So React reconciliation algorithm doesn't even run here.

Upvotes: 3

Related Questions