import React, { useRef, useState } from "react";

import PropTypes from "prop-types";

const App = () => {
  let firstRef = useRef(null),
    middleRef = useRef(null),
    lastRef = useRef(null);

  const [name, setName] = useState({
    firstName: "",
    middleName: "",
    lastName: "",
  });

  const firstN = () => {
    setName({ ...name, firstName: firstRef.current.value });
  };

  const middleN = () => {
    setName({ ...name, middleName: middleRef.current.value });
  };

  const thirdN = () => {
    setName({ ...name, lastName: lastRef.current.value });
  };

  return (
    <React.Fragment>
      <Name first={name.firstName} middle={name.middleName} last={name.lastName} />
      <Name first={name.firstName} middle={name.middleName} last={name.lastName} />
      <input type="text" ref={firstRef} onChange={firstN} />
      <input type="text" ref={middleRef} onChange={middleN} />
      <input type="text" ref={lastRef} onChange={thirdN} />
    </React.Fragment>
  );
};

export default App;

export const Name = ({ first, middle, last }) => {
  return (
    <>
      <h2>
        My name is {first} {middle} {last}
      </h2>
    </>
  );
};

Name.propTypes = {
  first: PropTypes.string,
  middle: PropTypes.string,
  last: PropTypes.string,
};

import React, { useState } from "react";

import PropTypes from "prop-types";

const App = () => {
  const initialAge = 3;
  const initialSalary = 24000;

  const [age, setAge] = useState(initialAge);
  const [salary, setSalary] = useState(initialSalary);

  const incrementAge = () =>
    setAge((prevAge) => {
      setAge(prevAge + 1);
    });

  const resetAge = () => {
    setAge(initialAge);
  };

  const decrementAge = () => {
    setAge((prevAge) => {
      setAge(prevAge - 1);
    });
  };

  const incrementSalary = () => {
    setSalary((prevSalary) => {
      setSalary(prevSalary + 5000);
    });
  };
  const resetSalary = () => {
    setSalary(initialSalary);
  };
  const decrementSalary = () => {
    setSalary((prevSalary) => {
      setSalary(prevSalary - 100);
    });
  };

  return (
    <React.Fragment>
      <MemoizedComponentOne text="Age" age={age} />
      <Button
        handleClick={() => {
          incrementAge();
        }}>
        Increment Age
      </Button>
      <Button
        handleClick={() => {
          resetAge();
        }}>
        Reset Age
      </Button>
      <Button
        handleClick={() => {
          decrementAge();
        }}>
        Decrement Age
      </Button>
      <MemoizedComponentTwo text="Salary" salary={salary} />
      <Button
        handleClick={() => {
          incrementSalary();
        }}>
        Increment Salary
      </Button>
      <Button
        handleClick={() => {
          resetSalary();
        }}>
        Reset Salary
      </Button>
      <Button
        handleClick={() => {
          decrementSalary();
        }}>
        Decrement Salary
      </Button>
    </React.Fragment>
  );
};

export default App;

function ComponentOne({ text, age }) {
  return (
    <>
      <p>
        {text} - {age}
      </p>
    </>
  );
}
export const MemoizedComponentOne = React.memo(ComponentOne);

ComponentOne.propTypes = {
  text: PropTypes.string,
  age: PropTypes.number,
};
function ComponentTwo({ text, salary }) {
  return (
    <div>
      <p>
        {text} - {salary}
      </p>
    </div>
  );
}

ComponentTwo.propTypes = {
  text: PropTypes.string,
  salary: PropTypes.number,
};

export const MemoizedComponentTwo = React.memo(ComponentTwo);

const Button = ({ handleClick, children }) => {
  return <button onClick={handleClick}>{children}</button>;
};

Button.propTypes = {
  children: PropTypes.string,
  handleClick: PropTypes.func,
};

export const MemoizedButton = React.memo(Button);