React using “use-immer”

Using immer to manage object.

import React from "react";
import { useImmer } from "use-immer";

function App() {
  const [person, updatePerson] = useImmer({
    name: "Michel",
    age: 33
  });

  function updateName(name) {
    updatePerson(draft => {
      draft.name = name;
    });
  }

  function becomeOlder() {
    updatePerson(draft => {
      draft.age++;
    });
  }

  return (
    <div className="App">
      <h1>
        Hello {person.name} ({person.age})
      </h1>
      <input
        onChange={e => {
          updateName(e.target.value);
        }}
        value={person.name}
      />
      <br />
      <button onClick={becomeOlder}>Older</button>
    </div>
  );
}

using immer to manage single value.

import React from 'react';
import { useImmer } from 'use-immer';

function BirthDayCelebrator(){
  const [age, setAge] = useImmer(20);

  function birthDay(event){
    setAge(age + 1);
    alert(`Happy birthday #${age} Anon! hope you good`);
  }

  return(
    <div>
      <button onClick={birthDay}>It is my birthday</button>
    </div>
  );
}

using immer reducer

import React from "react";
import { useImmerReducer } from "use-immer";

const initialPerson = {
    name:"",
    age:18,
    birthday:1988,
    health:100
};

function FormReducer(draft,action) {
    switch(action){
        case 'attack':
            return draft.health--
        case 'treat':
            return draft.health++
        case 'reset':
            return initialPerson
    }
}

function Counter() {
  const [person,dispathPerson] = useImmerReducer(FormReducer, initialPerson);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispathPerson("attack")}>been attack</button>
      <button onClick={() => dispathPerson("treat")}>been treat</button>
      <button onClick={() => dispathPerson("reset")}>reset property</button>
    </>
  );
}