React Patterns

In React Making Use of Component Composition

https://aman-106.github.io/

Container components

Rather than nesting components within components, and then struggling to pass data to them through prop drilling, we can simply lift these components to our root app, and then manually pass the intended child components to the parent component with the intended data attached directly to the child component.

Examples

function App() {
  const [data, setData] = useState("some state");
  return <ComponentOne ComponentTwo={<ComponentTwo data={data} />} />;
}
function ComponentOne({ ComponentTwo }) {
  return (
    <div>
      <p>
        This is Component1, it receives component2 as a prop and renders it{" "}
      </p>
      {ComponentTwo}
    </div>
  );
}
function ComponentTwo({ data }) {
  return <h3>This is Component two with the received state {data} </h3>;
}

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left"> {props.left} </div>
      <div className="SplitPane-right"> {props.right} </div>
    </div>
  );
}
function App() {
  return <SplitPane left={<Contacts />} right={<Chat />} />;
}

function App() {
  const [user, setState] = useState({ name: "Steve" });
  return (
    <div>
      <Navbar />
      <MainPage content={<Content message={<Message user={user} />} />} />
    </div>
  );
}

function Navbar() {
  return <nav style={{ background: "#10ADDE", color: "#fff" }}> Demo App </nav>;
}

function MainPage({ content }) {
  return (
    <div>
      <h3>Main Page </h3> {content}{" "}
    </div>
  );
}

function Content({ message }) {
  return;
  <div>{message}</div>;
}

function Message({ user }) {
  return;
  <p>Welcome {user.name})</p>;
}

<MainPage content={<Content message={<Message user={<User/> } />} / >}/>

Avoids Props Drilling

Specialized components

Render specialized variants of itself by passing in props that match the conditions for a specific variant.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      {" "}
      <h1 className="Dialog-title">{props.title} </h1>{" "}
      <p className="Dialog-message"> {props.message} </p>{" "}
    </FancyBorder>
  );
}
function WelcomeDialog() {
  return (
    <Dialog title="Welcome" message="Thank you for visiting our spacecraft!" />
  );
}

Helps in Creating Reusable Components