DEV Community

Cover image for A Comprehensive Guide on Advanced React Component Patterns
Tarun Gurang
Tarun Gurang

Posted on • Originally published at ifourtechnolab.com

A Comprehensive Guide on Advanced React Component Patterns

What are React Patterns?

React Patterns means how react handle the flow of code, which type of criteria it followed and how to manage whole things, it’s all about its workflow life cycle.

Component patterns in react

Higher-Order Component
Once you create one component and that code will be used in your entire project more than one time that time you take the component as HO, C first you create a component in your project you can use multiple times in your project, that is a benefit you do not have to write a code more and more time its increase the higher performance of React its also increase the readability of React.

Example:

<xmp>
import React from 'react';// Take in a component as argument WrappedComponentconst higherOrderComponent = (WrappedComponent) => {// And return another component
  class HOC extends React.Component {
    render() {
      return <WrappedComponent />;
    }
  }
  return HOC;};
</xmp>

Enter fullscreen mode Exit fullscreen mode

Passing props:
React is unidirectional it decreases the complexity of code it makes it easier for developers. Data are passed from parent component to child components and the entire process of the props will be immutable it's just getting the direction from parent to a child not change the props value.

Reused Component: react is component-based, in react you can read any component in the other component its also increase the readability of React.

Spread and Rest operators :
The spread operator allows you to get elements out of an array (=> split the array into a list of its elements) or get the data out of an object.

Spread: used to split up array element or object properties:

Rest: used to merge a list of function arguments into an Array

Destructuring:
Array Destructing: easily extract array elements and store them in a variable.

<xmp>
[a,b] = [ ‘add’ , ’sub’]
Console.log (a ); 
// Print “add”
Console.log (b );
//print  “sub”
Object Destructing:easily extract object element and strore them in variable.
{name}  =  {  name: ’max’ , age:29 }
Console.log(name);
//print  max
Console.log(age);
//print  undefined 
</xmp>

Enter fullscreen mode Exit fullscreen mode

Read More: A Complete Guide On React Fundamentals: Props And State

Conditioal Rendering

If-Else Condition operator:

<xmp>
if(a>b)
  {
     console.log(a);
}
else 
{
  console.log(b);
}
</xmp>

Enter fullscreen mode Exit fullscreen mode

Ternary operator:

<xmp>
  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
</xmp>

Enter fullscreen mode Exit fullscreen mode

Array and list:

<xmp>
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 34, 3, 4, 52];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
</xmp>

Enter fullscreen mode Exit fullscreen mode

Keys: is a uniquely identify the rows which data is deleted updated that time it's useful for apply unique id.

<xmp>
const numbers = [1, 34, 3, 4, 52];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);
</xmp>

Enter fullscreen mode Exit fullscreen mode

contextAPI

Create the Provider

First, we have to create a provider which is defined in syntax and pass the value in the value tag after creating the provider you have to create a consumer and initialize and create the consumer creation. Which define all syntax in the below code and consider the one example you getting more easily thorough this code.

<xmp><MyContext.Provider value={/* some value */}></MyContext.Provider></xmp>

Enter fullscreen mode Exit fullscreen mode

Create the consumer

<xmp> < MyContext.Consumer>
  {value => / create context value/}</MyContext.Consumer>
</xmp>

Enter fullscreen mode Exit fullscreen mode

Initializing Content:

<xmp>
export const ThemeContext = React.createContext({  theme: themes.dark,  toggleTheme: () => {},});
</xmp>

Enter fullscreen mode Exit fullscreen mode

Consumer Creation:

<xmp>
function Layout() {
    return (
      <div>      <Sidebar />      <Content />    </div>
    );}
  // A component may consume multiple contextsfunction Content() {
    return (    <ThemeContext.Consumer>    
    {theme => (        <UserContext.Consumer>       
     {user => (            <ProfilePage user={user} theme={theme} />        
    )}        </UserContext.Consumer>      )}   
   </ThemeContext.Consumer>  );}

</xmp>

Enter fullscreen mode Exit fullscreen mode

Looking to Hire React Developers? Your Search ends here.

Layout component:Layout Component work like that

As its name states - it defines the layout of the application. It simply accepts children as props and renders them to the DOM together or without other child components.

<xmp>
import React from 'react';
const Layout =({children}) =>{
    return(
        <>
        <div>
            <ToolBar/>
            <Sides/>
            <Backdrop/>
        </div>
        <main>{children}</main>
        </>
    )}
export default Layout;
</xmp>

Enter fullscreen mode Exit fullscreen mode

Hooks Component:
Hooks and their advanced features are established in ES6. Using the hooks component, we can set the state in the function component. We can even use componentDidMount and componentUnmount with hooks components to pass the context.

UseState:
It is a Hook (function) that allows you to have state variables in functional components.

Example:

<xmp>
import React, { useState } from 'react';
function Example() {  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>      <p>You clicked {count} times</p>      <button onClick={() => setCount(count + 1)}>        Click me      </button>    </div>
  );}
</xmp>

Enter fullscreen mode Exit fullscreen mode

useEffect():
React has a built-in hook called the use effect. Hooks are used in functional components.

If using class components in that no have to build the use effect. Use effects only work for the Functional component

Three phases are supported in useEffect():

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount
<xmp>
useEffect(()=>{
console.log(‘render’);
return()=>console.log(‘unmounting’);
})
</xmp>

Enter fullscreen mode Exit fullscreen mode

Here, you have to just pass some value in an empty array which is defined in a syntax that runs on the mount and on unmount time. It does not get any load time or refresh page time.

<xmp>
useEffect(()=>{
    console.log(‘render’);
    return()=>console.log(‘unmounting’);
  },[])
</xmp>

Enter fullscreen mode Exit fullscreen mode

useContext()
The current context value is considered by the value prop of the first above the calling component in the above tree.

The useContext( ) method accepts a context within a functional component and works with a . Provider and. Consumer component in one call.

<xmp>
Const value=useContext(MyContext);
const themes = {
    light: {
      foreground: "#000000",
      background: "#eeeeee"
    },
    dark: {
      foreground: "#ffffff",
      background: "#222222"
    }};
  const ThemeContext = React.createContext(themes.light);
  function App() {
    return (
      <ThemeContext.Provider value={themes.dark}>      <Toolbar />    </ThemeContext.Provider>
    );}
  function Toolbar(props) {
    return (
      <div>      <ThemedButton />    </div>
    );}
  function ThemedButton() {  const theme = useContext(ThemeContext);  return (    <button style={{ background: theme.background, color: theme.foreground }}>      I am styled by theme context!    </button>  );}

</xmp>

Enter fullscreen mode Exit fullscreen mode
Conclusion

React component patterns concept is all about the features and functionalities used in React platform. In this blog, we have gone through various kinds of libraries used in React.

Discussion (0)