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>
    );
}
⚠️ **GitHub.com Fallback** ⚠️