Custom hook pattern
Let's take a closer look at "reversal of control" here. Now the main logic is a user custom Hook forwarded to These hooks are user-accessible and allow easier control of the component by exposing several internal logic ( States , Handlers ) .
Libraries that use this pattern
Advantages
More Control: Users can change the behavior of the main component by inserting their own logic between hooks and JSX components.
import React from "react";
import { Counter } from "./Counter";
import { useCounter } from "./useCounter";
const Component =()=> {
const { count, handleIncrement, handleDecrement } = useCounter(0);
const MAX_COUNT = 10;
const handleClickIncrement = () => {
//Put your custom logic
if (count < MAX_COUNT) {
handleIncrement();
}
};
return (
<>
<Counter value={count}>
<Counter.Decrement
icon={"minus"}
onClick={handleDecrement}
/>
<Counter.Label>Counter</Counter.Label>
<Counter.Count />
<Counter.Increment
icon={"plus"}
onClick={handleClickIncrement}
/>
</Counter>
<div>
<button onClick={handleClickIncrement} >
Custom increment btn 1
</button>
</div>
</>
);
}
export { Component };

Disadvantages
Implementation complexity: the logic is decoupled from the rendering and it is up to you to connect the two. To properly implement a component, you need a deep understanding of how the component works.
References and articles :
Last updated
Was this helpful?