javascript - Usage of React HOC for Functional Components - Stack Overflow

admin管理员组

文章数量:1404578

I was referring to the below link (section : HOCs for Functional Components)

In the example, below is the code for the HOC;

//functional HOC with useState hook
import React, { useState } from 'react';
function withCountState(Wrapped) {
   return function (props) {
      const [count, setCount] = useState(0);
  
      props['count'] = count;
      props['setCount'] = setCount;
      return <Wrapped {...props} />;
   }
}

Also, the Wrapped ponent code is as below;

const Wrapped = (props) =>  {
   const {count, setCount} = props;
   return(
     <div>
        <h1>Counter Functional Component</h1>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
           Increment count
        </button>
     </div>);
};

For applying HOC to , we use

const EnhancedWrapped = withCountState(Wrapped);

Now I have 2 questions;

1. For consuming this ponent, do we just say <EnhancedWrapped> may be in our App.js or do we need anything else?
2. What benefit do we really get out of creating this HOC?

I was referring to the below link (section : HOCs for Functional Components) https://rossbulat.medium./how-to-use-react-higher-order-ponents-c0be6821eb6c

In the example, below is the code for the HOC;

//functional HOC with useState hook
import React, { useState } from 'react';
function withCountState(Wrapped) {
   return function (props) {
      const [count, setCount] = useState(0);
  
      props['count'] = count;
      props['setCount'] = setCount;
      return <Wrapped {...props} />;
   }
}

Also, the Wrapped ponent code is as below;

const Wrapped = (props) =>  {
   const {count, setCount} = props;
   return(
     <div>
        <h1>Counter Functional Component</h1>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
           Increment count
        </button>
     </div>);
};

For applying HOC to , we use

const EnhancedWrapped = withCountState(Wrapped);

Now I have 2 questions;

1. For consuming this ponent, do we just say <EnhancedWrapped> may be in our App.js or do we need anything else?
2. What benefit do we really get out of creating this HOC?

• javascript
• reactjs
• higher-order-functions
• higher-order-ponents

Share Improve this question Follow asked Dec 31, 2020 at 14:22 copenndthagencopenndthagen 50.9k105105 gold badges313313 silver badges491491 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Viet has answered your questions. HOC is a way to make your ponents re-usable through position. You can have other ponents which get wrapped by the HOC and now they would have access to the count and setCount functionality.

Depending upon what you are trying to acplish, it's also a good idea to consider the pitfalls of HOC and consider alternate patterns such as :

• Render Props: React Docs on Render Props
• Using Custom Hooks over HOC Article on custom hooks

When using React Hooks, I'd personally prefer making custom hooks over using HOCs. And depending upon the use case, you may want to check out if React Context would make sense if multiple ponents are going to need a shared state.

1. For consuming this ponent, do we just say may be in our App.js or do we need anything else? Yes, just use HOC like any other JSX ponent.

2. What benefit do we really get out of creating this HOC? You can make it reusable. Let's say you want another ponent with different content inside, like , you could just create a new ponent by const AnotherEnhancedWrapped = withCountState(AnotherWrapped);

本文标签： javascriptUsage of React HOC for Functional ComponentsStack Overflow