Map Dispatch to Props

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

const [inputValue, setInputValue] = useState('');
const [list, setList]= useState([]);

handleAddIntemOnList(){
  // create a new item as object to be added to the list array
  const newItem = {
    name: inputValue,
    addedAt: new Date().toLocaleTimeString("pt-br", {
      hour: '2-digit',
      minute: '2-digit'
    })
  }
  // save into the list state
  setList(prevState => [...prevState, newItem])
}

setState(prevState => [...prevState, newState])

const createdAt = new Date().toLocaleTimeString("pt-br", {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
})

const [inputs, setInputs] = useState({
    title: '',
    address: '',
    methodName: '',
    signatures: '',
    calldatas: ''
  }) 


const inputHandler = (event:React.ChangeEvent<HTMLInputElement>) => {
    setInputs({...inputs, [event.target.name]: event.target.value})
  };


<Input placeholder='Title' name='title' onChange={inputHandler}/>
<Input placeholder='Target contract address' name='address' onChange={inputHandler}/>
<Input placeholder='Method name' name='methodName' onChange={inputHandler}/>

 const initialState = {
    name: "",
    email: "",
    mobile: "",
    subject: "",
    message: "",
  };
  const [formData, setFormData] = useState(initialState);

  const newsletterHandler = (e) => {
    e.preventDefault();
    console.log(formData);
    window.location.href =
      "mailto:info@gmail.com?" +
      "&body=" +
      "Name : " +
      formData.name +
      "%0D" +
      "Email : " +
      formData.email +
      "%0D" +
      "Mobile : " +
      formData.mobile +
      "%0D" +
      "Subject : " +
      formData.subject +
      "%0D" +
      "Message : " +
      formData.message;

    setTimeout(() => {
      setFormData(initialState);
    }, 3000);
  };

If you want to get rid of unnecessary files created by create-react-app you can:
1. Install this: npm i -g cleanup-react-app
2. Run inside your REACT project: cleanup-react-app

 <Control
type="text"
size="sm"
style={{ width: '146px' }}
placeholder="Enter new library name"
onInput={(e) => setLibraryName((e.target as HTMLInputElement).value)}
onBlur={() => dispatch(posesSlice.actions.setLibrary({ name: libraryName }))}
/>

this.setState automatically calls render, so it would create infinite loop.

Question:

What values can you store in state?
Answer

A React component’s state is a plain JavaScript object, so it can store any valid value that is storable within a JavaScript object. This includes booleans, strings, numbers, and even other objects which you can nest within the state.

/* 
1. A constructor is a function that creates an instance of a class 
 which is typically called an “object”.

 2. In JavaScript, a constructor gets
 called when you declare an object using the new keyword.

 3. The purpose of a constructor is to create an object and 
 set values if there are any object properties present.
*/
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
}

// Create a Person object
const myFather = new Person("John", "Doe", 50);
console.log(myFather)
/*
Inheritance is when we create a parent class with properties and methods
that we can extend to child classes.
We use the extends keyword to create a subclass.
The super keyword calls the constructor() of a parent class.
*/

/*
Remember Functions are function-object combo, In the object bit of 
function we put all the methods in a default property(which every
object has) called prototype and it is itself an object. 

In ES6 class keyword puts them in prototype object for us automatically
and the function bit of function-object combo, we rename it 
"constructor".
Every object has hidden property called __proto__ which makes link to 
prototype in the objects chain. That's how we access shared functions.

Methods should never be comma-separated, if inside of a class body. This is to emphasize the fact that classes and object literals are different.
*/