How to implement HOC characteristics width useHooks? - reactjs

Question

I'm want to rewrite my high-order-component with useHooks. it is possible reuse stateful logic like hoc?
I have worked with hoc for a while, I think it is esay to solution some problem.
I tried to implement same features like hoc use useHooks, sorry... I failed
// HOC
const Hoc = WrapperComponent => (
class extends React.Component {
state = {
toggle: false
}
handleClick = () => {
this.setState({ toggle: !this.state.toggle })
}
render() {
const { toggle } = this.state
return (
<>
<button onClick={handleClick}>click</button>
{toggle && <WrapperComponent />}
</>
)
}
}
)
// Component A
function CompA () {
return 'class comp a'
}
// reuse logic with hoc
export default Hoc(CompA)
// this is my code.
// but i think it's hoc style. not really hooks idea
function useHooks(WrapperComponent) {
const [toggle, setToggle] = useState(false)
return () => (
<>
<button onClick={() => setToggle(!toggle)}>click</button>
{toggle && <WrapperComponent />}
</>
)
}
//
export default useHooks(ClassCompA)

Answer 1

Hooks is designed to share any necessary logic between the components.
Presentational elements like JSX are not included in this logic. They are best left at the components which can be composed to any level necessary.
For your example using the HOC, there would need to be a component for the presentation and hooks for sharing the logic.
const { useState, Fragment } = React;
function useToggle() {
const [ show, setShow ] = useState(false);
const toggle = () => {
setShow(show => !show);
}
return {
show,
toggle,
}
}
function Toggler({ children }) {
const { show, toggle } = useToggle();
return (
<Fragment>
{show && children }
{<button onClick={toggle}>Toggle View</button>}
</Fragment>
);
}
function App() {
return (
<Toggler>
<h1>This content can be toggled</h1>
</Toggler>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>