ReactJS Hook Pattern ~Deriving State~

Source: Dev.to

Avoid Redundant State

Pattern: Avoid storing a state that can be calculated from existing other states. In ReactJS, this pattern is officially recommended as Avoid redundant state.

import { useState } from "react";

function App() {
  const [firstName] = useState("John");
  const [lastName] = useState("Doe");

  const fullName = `${firstName} ${lastName}`;

  return (
    <>
      Full Name: {fullName}
    </>
  );
}

export default App;