Artice: Mobx likes mutability. React does not | With Mobx you can mutate your state

mobx-keeps-state-immutable.js

apples = [...apples, "Apple number " + apples.length]

mobx-mutate-state.js

// Let's say you have an user state
const user = observable({
  name: ""
});

// For updating its name, just mutate the state inside an action
// by assigning a new value for the property you want to change:
const setName = action((name, user) => {
    user.name = name
})

setName("New cool name", user)

trust-on-observer.ts

// Mind that in this example we're only using the persons state
// and wrapping our component with the observer
const Persons = observer(({ persons }) => {
  useEffect(() => {
    console.log("Current state of the list: ", persons);
  })

  return ...
  );
});

use-primitive-values-as-useeffect-dependencies.ts

// Don't ❌
useEffect(() => {
  console.log(`The person's name is ${person.name}`)
},[person])

// Do it ✅
useEffect(() => {
  console.log(`The person's name is ${person.name}`)
},[person.name])