React is such a powerful library, that everyone with knowledge of the basics can build a really good application. Managing state in react is built out of the box with React own state management APIs. But as your app gets more complex, it becomes harder to track, get a better hold of your state and understand what is going on. In order to improve the understanding of your code at such a moment, React has made available techniques and APIs that helps us build components that seamlessly work. Some of those techniques and API are: HOC(Higher Order Component) Render Props React Context HOC(Higher Order Component) HOC is an advanced technique to React to reusing component logic. Just like a , which receives a function as an argument and returns a function, a HOC takes a component as an argument and returns a new component. Higher Order Function Let's take this code for example: React { students = [
    { : , : },
    { : , : },
    { : , : },
    { : , : },
    { : , : },
    { : , : },
  ]; ( <p>
          {student.name} - {student.score}
        </p> );
} import from 'react' ( ) function Students const name "John" score "A-" name "Samuel" score "B-" name "Smith" score "A+" name "Mark" score "A-" name "Mike" score "B-" name "John" score "B+" return {students.map((student) => ( < > div ))} </ > div From the snippet of code above, we could tell that the list of students and their grade is tied to the component. What happens when another component needs to make use of that same list? We do not want to copy and paste the same list across all components. But what we want is a reusable component that could be used by other components. This is where HOC shines, it allows us to create a Wrapper Component that provides other components with the data they need. Students React { ( <p>
          {student.name} - {student.score}
        </p> );
} withStudents = { students = [
    { : , : },
    { : , : },
    { : , : },
    { : , : },
    { : , : },
    { : , : },
  ]; <Component {...students}> ;
}; ComponentWithStudents = withStudents(Students); ComponentWithStudents; import from "react" ( ) function Students props return {props.students.map((student) => ( < > div ))} </ > div const ( ) => Component const name "John" score "A-" name "Samuel" score "B-" name "Smith" score "A+" name "Mark" score "A-" name "Mike" score "B-" name "John" score "B+" return => () </ > Component const export default We create a component which accepts any component as argument and supplies data to it in the form of . The wrapper component returns the supplied component by wrapping it in a container component, it does not alter the argument component in any way. HOC are pure functions with no side-effects. The syntax above will look familiar to you if you have worked with before. withStudents props withStudents redux We could pass extra parameters to our wrapper component by doing the following: withStudents = (Component) => { students = [
    { : , : },
    { : , : },
    { : , : },
    { : , : },
    { : , : },
    { : , : },
  ]; listStudentsLimited = students.slice( , count); <Component students={listStudentsLimited}> ;
}; maxStudentCount = ; withStudents(maxStudentCount)(App); const ( ) => count const name "John" score "A-" name "Samuel" score "B-" name "Smith" score "A+" name "Mark" score "A-" name "Mike" score "B-" name "John" score "B+" const 0 return => () </ > Component const 3 export default Our component remains the same while the wrapper now returns a function that wraps what was previously returned, making it a true Higher Order Function :). Students withStudents Next, we will look at how we could use Render Props to do similar data sharing. Render Props The second way by which we can share data among components is with Render Props. From the , it defines render props to be react.js A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. So using our previous example, we create a render props component that surrounds the rendering part of the original component. The Render Props in turn returns the component as its child and passes any data to it. Student React ; { ( <div>
          <h1>Students with grades</h1>
          {students.map((student) => (
            <p>
              {student.name} - {student.score}
            </p>
          ))}
        </div> );
} StudentWithRenderProps = { students = [
    { : , : },
    { : , : },
    { : , : },
    { : , : },
    { : , : },
    { : , : },
  ]; props.children({
    students,
  });
}; Students; import from "react" ( ) function Students return {({ students }) => ( < > StudentWithRenderProps )} </ > StudentWithRenderProps const ( ) => props const name "John" score "A-" name "Samuel" score "B-" name "Smith" score "A+" name "Mark" score "A-" name "Mike" score "B-" name "John" score "B+" return export default Context From the React.js website, it defines context as follow, Context provides a way to pass data through the component tree without having to pass props down manually at every level. This is one way to solve the component drilling issue, where you have to pass data through several components to share data with children located down in the components. Using Context makes it easier to share data among many components within an application; data such as user session, theme or language. In our example, we are going to use a context to share user-session information among components that need it. AuthContext = React.createContext({}); { userInfo = { : , : }; ( <Profile></Profile> export const export default ( ) function App const name "John Smith" email "john@smith.com" return < = > AuthContext.Provider value {userInfo} );
} </ > AuthContext.Provider First, we create the context and assign it to a variable. This will be used to wrap any consuming component with the help of the Provider component that is made available by the context. The Provider accepts a prop that contains the data to share among any nested components. In our case, we want to share the . React.createContext({}) value userInfo Next, for any component to access the data being shared by a context, we need to get a reference of the context and pass it to the hook made available by React. useContext { useContext } ; { AuthContext } ; { auth = useContext(AuthContext); .log(auth); ( <span style={{ color: "red" }}>
        {Object.keys(auth).length > 0 ? "Logged in" : "Logged out"}
      </span> );
} import from "react" import from "./App" export default ( ) function Profile const console return User is < > div </ > div Now, the Profile component has access to the from the AuthContext. userInfo Both HOC and Render Props works almost in the same way. HOC works in a way that feels like it works behind the scene, while Render Props are more frontend centered. They are less code-intensive as compared to Context. Context on the other hand allows us to give all consuming components access to the data passed to the . Provider Also published at https://dev.to/edemagbenyo/build-better-components-with-react-3kha/edit

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Build Great React Components Easily And Effortlessly

Too Long; Didn't Read

People Mentioned

Edem Agbenyo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Build Great React Components Easily And Effortlessly

Too Long; Didn't Read

People Mentioned

Edem Agbenyo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES