Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 18, 2021 06:58 pm GMT

Composition in React

React implements a unidirectional pattern for data flow for building components. The pattern itself is not unique to react but followed strictly in react.

Unidirectional data flow means that data can only flow in one way alone.

Following the definition and if experienced with react, you would have noticed that the child component cannot pass data to the parent component; hence, data only flows in one way, FROM the parent TO the child.

If we need to modify the child that influences the parent or share state between two child components, we use props.

Lets see a trivial example.

import React from "react";import { Header } from "./components/header";export default function App() {  const [loggedIn, setLoggedIn] = React.useState(false);  const handleSetLoggedIn = () => {    setLoggedIn(!loggedIn);  };  return <Header loggedIn={loggedIn} handleSetLoggedIn={handleSetLoggedIn} />;}

In the example above, we make some assumptions that the App function is responsible for handling login, and it passes the loggedIn state and the handleSetLoggedIn function to Header.

Lets investigate the Header component and see how it makes use of these props.

import React from "react";import { Profile } from "./profile";function Header({ loggedIn, handleSetLoggedIn }) {  return (    <>      <Profile loggedIn={loggedIn} handleSetLoggedIn={handleSetLoggedIn} />    </>  );}export { Header };

Above, we can see that the Header component doesn't make use of the props but passes them to the Profile component that makes use of them. This situation is known as props drilling.

Props drilling

Props drilling is passing props to a child component that doesnt need the props but helps to pass it down to its own child component, which might pass it to its own child component because it doesnt need it as well till it gets to the child that really needs the props.

The problem with props drilling is that things get messy, and debugging might become difficult quickly.

A good solution might be to reach out for the context API or Redux, but that is not needed to solve this problem.

We could use composition (component composition) to our advantage. In fact, the React team says:

If you only want to avoid passing some props through many levels, the component composition is often a simpler solution than context.
React Team

What is composition?

Composition is the act of assembling components or elements to build a whole.

React gives a powerful tool that helps with composition, which is children-props.

We can easily refactor our Header component like this.

import React from "react";function Header({children}) {  return (    <>      {children}    </>  );}export { Header };

The childrens prop is available on every component. It contains the content between the opening and closing tags of a component.

Now, our Header component is a wrapper for the children we choose to render in it.

This gives us the power to refactor our App component render in App.js.

import React from "react";import { Header } from "./components/header";import { Profile } from "./components/profile";export default function App() {  const [loggedIn, setLoggedIn] = React.useState(false);  const handleSetLoggedIn = () => {    setLoggedIn(!loggedIn);  };  return (    <Header>      <Profile loggedIn={loggedIn} handleSetLoggedIn={handleSetLoggedIn} />    </Header>  );}

We have solved the issue with props drilling by making use of composition.

This pattern also gives us the power to build more scalable reusable components, especially when building a tool, a library, or components used by a large number of people with varying needs.

The next article will build a card component and see how composition can be an exciting pattern to think about and use often.

Thank you for reading.


Original Link: https://dev.to/wati_fe/composition-in-react-1f0p

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To