Understanding how/why/when React updates the DOM and how to use it

Question

I am making an app in which I have 3 buttons of which 2 are of importance to my problem. One button should add elements to the website the user is viewing and the other should remove elements.

I'm new to React and feel I have a grasp of the basics but clearly need to get my head around it better.

My first intuition was to just create an Array into which I could push elements and then just have that array in one of my JSX.Elements as the content of it.

That looked something like this:

My JSX.Element:

   answerView = (
                <div>
                    <button onClick={this.removeIceCream}>Poista jäätelö!</button>
                    <button onClick={this.addIceCream}>Lisää jäätelö!</button>
                    <button onClick={this.keyInput}>OK</button>
                    <div>{this.iceCreamCount}</div>
                </div>
            );

The function to just add something to the element.

addIceCream() {
   this.iceCreamCount.push(<li>"Jäätelö"</li>);
}

However this ends up in the array iceCreamCount updating but not being displayed in the DOM. Does React not ehmm "react" to changes in elements and only changes in its State or Properties?

Does this mean that in order to manipulate the DOM elements in accordance to user input my array containing the elements also needs to be a state variable?

---

If the above is indeed impossible then I would like help with how to do it properly in React and below is my attempt at doing so.

I've checked a few tutorials and examples and came up with something like this:

  addIceCream = () => {
        this.setState(state => {
            const iceCreams = state.iceCreams.concat(state.iceCream);

            return {
                iceCreams,
                iceCream: 'Jäätelö',
            };
        });
    };

With my state declaration looking like this:

this.state = { doorView: true, bunnyView: false, answerView: false, iceCream: "Jäätelö", iceCreams: [] };

During writing this problem I actually got this seemingly working but I would also like to understand how and why this works as I am not really confident in my knowledge.

However I don't feel like I've grasped what exactly is happening here. I'm not very confident with arrow-functions (if anyone has a great simple tutorial on them please do link) and while I think I've gathered that because data is supposed to be immutable in React is why I need to use concat() to create a new array that is a copy of the old one + my added element. But why do I need to return() the state variables and why are there so many arrow functions being thrown around (see below for my condensed "what I would like to know list")?

---

What I would like to know

• Is the first part of my question a workable way in React or is it simply the wrong approach completely? If it can be done, I would appreciate if someone would show me how and what are my mistakes in my thinking.
• Why and how does the second part of my question work? If someone had the time and patience to go through it line by line starting from: addIceCream = () => {.... and tell me what is happening that would help me a lot in understanding and learning.

Answer 1

I will answer questions below.

---

Answer to the 1st question

Is the first part of my question a workable way in React or is it simply the wrong approach completely? If it can be done, I would appreciate if someone would show me how and what are my mistakes in my thinking.

The first approach is "the wrong approach completely" unfortunately (in React world that is).

addIceCream() {
   this.iceCreamCount.push(<li>"Jäätelö"</li>);
}

However this ends up in the array iceCreamCount updating but not being displayed in the DOM. Does React not ehmm "react" to changes in elements and only changes in its State or Properties?

That's exactly it. React "reacts" to the state & props changes that React keeps track of.

Does this mean that in order to manipulate the DOM elements in accordance to user input my array containing the elements also needs to be a state variable?

It depends. Some controls are "controlled" and another "uncontrolled" (, which applies to mostly to form fields.)

Most of the time, you'd go with (React) "controlled" options to keep all your states associated with React to keep track of. (In Class Components this.state ={...} or in Function Component using a hook, const [state, setState] = React.useState(...))

React's Reconciliation (a fancy way of saying, knowing what's changed and what to render) algorithm works by checking changed state/prop "references" (as opposed to a value).

When you did this.iceCreamCount.push(<li>"Jäätelö"</li>), you are basically changing the value of an array, "this.iceCreamCount", not the reference thereof.

And also after reassigning this.iceCreamCount to a new object, you also need to this.setState({iceCreamCount: newIceCreamCount}) to notify React that something has changed and need to re-render.

Now we know why the first approach doesn't work, let's move onto your workaround.

---

Answer to the 2nd question

Why and how does the second part of my question work? If someone had the time and patience to go through it line by line starting from: addIceCream = () => {.... and tell me what is happening that would help me a lot in understanding and learning.

state declaration

this.state = {
  doorView: true,
  bunnyView: false,
  answerView: false,
  iceCream: "Jäätelö",
  iceCreams: []
};

addIceCream = () => {
  this.setState(state => {
    const iceCreams = state.iceCreams.concat(state.iceCream);

    return { iceCreams, iceCream: "Jäätelö" }
    };
  });
};

When you look at addIceCream, you are indeed creating a new reference, iceCreams.
As explained in Question #1 above, that's how React's reconciliation algorithm know that a state has changed.
The gist is that React is optimized to check for the reference change because a deep property check (suppose that this.state has a deeply nested objects, then comparing each value would take too long)

And at the end you are returning a new reference return { iceCreams, iceCream: "Jäätelö" }, which notifies React that something indeed has changed.

---

Following up with the comment.

how do the arrow functions here work and why they are required for the "addIceCream"-function to work?

You've declared addIceCream using an Arrow Functions syntax.
As mentioned in the section below, No Separate this, an arrow function does not create its own this variable.

But when you do, this is set to parent context's this due the magic of scoping rules.

addIceCream = () => {
  this.setState(state => {
    const iceCreams = state.iceCreams.concat(state.iceCream);

    return { iceCreams, iceCream: "Jäätelö" }
    };
  });
};

That's why you can call this.setState above. JavaScript engine will try to find the closest parent's this up in the scope chain.

If you had declared addIceCream as a normal method,

class App extends React.Component {
  addIceCream() { ...}
}

then this points to addIceCream thus, won't have access to App's this.setState, which is made available from React.Component when you extend it.

So you'd see a workaround to bind the class method by passing its own this to it, which create a new function with current class's this.

class App extends React.Component {
  constructor(props) {
    super(props)

    //                     ... this create a new method with `App`'s `this`.
    this.addIceCream = this.addIceCream.bind(this)
  }

  addIceCream() { 
    // now that `this` is bound to `App`'s `this`, you can call this
    this.setState({...})
  }
}

This would be applicable when you use a Class Component (CC). When you use a Function Component (FC), this wouldn't matter.

You can use React's new Hooks (useState, or useReducer) to save the state.

(use useReducer for a complex state management)

cosnt initialState = {
  doorView: true,
  bunnyView: false,
  answerView: false,
  iceCream: "Jäätelö",
  iceCreams: []
};

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_ICECREAM':
      const { iceCream } = action.payload
      const iceCreams= [...state.iceCreams].concat(iceCream)
      return { ...state, iceCream, iceCreams }
    default: return state;
  }
}

function App() {
  const [icecreams, setIceCreams] = React.reducer(reducer, initialState);
  // You can use either one now.
  const addIceCream = iceCream =>
    dispatch({type: 'ADD_ICECREAM', payload: { iceCream }});
  // OR
  function addIceCream(iceCream) {
    dispatch({type: 'ADD_ICECREAM', payload: { iceCream }});
  }
}

reducer function returns a new object reference thus will cause React to re-render.

You might have noticed that arrow syntax version uses const like const addIceCream = iceCream => ....

Now it becomes a pointer to a function, so it should be declared before its being used unlike the function version because of how JavaScript hoisting works.

Answer 2

Is the first part of my question a workable way in React or is it simply the wrong approach completely? If it can be done, I would appreciate if someone would show me how and what are my mistakes in my thinking.

If you are using classes, you can use this (the instance of the component) to store data. However, if you are using this data in your render function, you most likely want to go for this.state.

Why and how does the second part of my question work? If someone had the time and patience to go through it line by line starting from: addIceCream = () => {.... and tell me what is happening that would help me a lot in understanding and learning.

Here you go:

  // Declare a method
  addIceCream = () => {
        // calling `setState` instructs the Component class that you are 
        // going to update the state. This way, the Component class knows 
        // that it should see if there are changes and it should rerender.
        // When calling `setState` with a function, you get the current state
        // as the first argument.
        this.setState(state => {
            // This creates a new `iceCreams` Array with the `state.iceCream`
            // as new value. You shouldn't call `push` here because this mutates
            // the original array and can be seen as antipattern. 
            const iceCreams = state.iceCreams.concat(state.iceCream);

            // Returning the changes to the state. The `iceCream` property is 
            // probably wrong here
            return {
                iceCreams,
                iceCream: 'Jäätelö',
            };
        });
    };

Answer 3

It would be better to see you full code but you want something like this:

class Icecream extends React.Component {
  // this is the state you modify, every time you change it
  // render() will run
  state = {
    icecreams: [],
  };
  
  // take all the elements from the current array and the new one
  // and store it in the state -> trigger render()
  addIceCream = newIcecream => this.setState(state => ({
    icecreams: [...state.icecreams, newIcecream],
  }));
  
  // remove the item with the given index and store
  // the result in the state -> trigger render
  removeIcecream = iceCreamIndex => this.setState(state => {
    const newIcecreams = [...state.icecreams];
    newIcecreams.splice(iceCreamIndex, 1);
    return {
      icecreams: newIcecreams,
    }
  });
 
  render() {
    // instead of this you can do this.addIceCream etc.
    const { addIceCream, removeIcecream } = this;
    const { icecreams } = this.state;
    return (
      <div>
        <button 
          onClick={() => 
            addIceCream(`Icream ${icecreams.length + 1}`)
          }
        >
          add icecream
        </button>
        <ul>
          {icecreams.map((item, index) => (
            <li>
              {item}
              <button onClick={() => removeIcecream(index)}>
                remove
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
};

ReactDOM.render(<Icecream />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>