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);