import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

import React, { useState, useEffect, useReducer, memo } from 'react';
const style = {
  height: 60,
  width: 50,
  margin: 10,
}

function reducer(state, action) {
  switch (action.type) {
    case 'reset':
      return { count: action.payload };
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      // A reducer must always return a valid state.
      // Alternatively you can throw an error if an invalid action is dispatched.
      return state;
  }
}

function Counter({ initialCount }) {
  const [state, dispatch] = useReducer(reducer, initialState, { type: 'reset', payload: initialCount });

  return (
    <div>
      <p style={{ fontSize: 100 }}><b>{state.count}</b></p>
      <button style={style} onClick={() => dispatch({ type: 'reset', payload: initialCount })}>
        Reset
      </button>
      <button style={style} onClick={() => dispatch({ type: 'increment' })}>
        ➕
      </button>
      <button style={style} onClick={() => dispatch({ type: 'decrement' })}>
        ➖
      </button>
    </div>
  );
}

const MyComponentMemo = memo((props) =>{
  return (
    <>
      <div style={{ fontSize: 50 }}>{props.name}</div>
    </>
  )
});

function MyComponent() {
  const [name, setName] = useState('😍');

  return (
    <div className="App">
      <header className="App-header">
        <div>
          <br />
          <input type="text" onChange={(e) => setName(e.target.value)} />
          <MyComponentMemo name={name} />
          {Counter({ initialCount: 0 })}
        </div>
      </header>
    </div >
  );
}