umma.dev

High Ordered Components are used in traditional Redux via connect. Hooks do not usually incorporate HOCs.

What are Higher Ordered Components?

HOCs enable to you to be able to take arguments from one component and return a new component, and is a technique used in React to re-use the logic of a component.

Components maybe designed like this if components share certain behaviours in way that makes them connection in some form, for example props and state.

Usually in HOCs it is the parent component in which where the data is kept. For example in tradiitonal Redux, the page will usually connect to get access to the data via the store. The data is then passed down via props.

Data Flow in Hooks

Here is an example of useState in React hooks.

const [character, setCharacter] = useState({})

useEffect(() => {
    axios.get(`https://swapi.co/api/people/`)
         .then(res => {setCharacter(res.data)})
}, [])

The hook useEffect behaves similarly to componentDidMount. This hook enables you to deal with side effects and is executed after every render cycle. The second argument of the empty array controls if the function should be executed, for example like a change of value within the array.

Can HOCs be Used in Hooks?

Yes but this is something I'm yet to implement/ haven't read enough into it.

Hooks or HOCs?

HOCs are very good when you have a large application however if you only need data to be explicitly used for a component, hooks is a lot easier!