React ~ Hooks ~ Custom Hooks - rohit120582sharma/Documentation GitHub Wiki
In class components, the Higher-order Components and Render Props allows to define a logic in a single place and share the common functionality like non-visual logic between components without repeating code.
Building your own Hooks lets you extract component logic into reusable functions in functional components. That means sharing non-visual logic via a custom Hook is the thing that makes it so special.
A custom Hook is a javascript function whose name starts with ”use” and that may call other Hooks.
function useHover () {
const [hovering, setHovering] = React.useState(false);
const mouseOver = () => setHovering(true);
const mouseOut = () => setHovering(false);
const attrs = {
onMouseOver: mouseOver,
onMouseOut: mouseOut
};
return [hovering, attrs];
}
function Info(props) {
const [hovering, attrs] = useHover();
return (
<div {...attrs}>
{hovering === true
? <Tooltip id={id} />
: null}
<svg width={size} viewBox="0 0 16 16">
<path d="M9 8a1 1 0 0 0-1-1H5.5a1 1 0 1 0 0 2H7v4a1 1 0 0 0 2 0zM4 0h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm4 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
</svg>
</div>
);
}