Actually, messing around unethical ideas and sketching rough codes.

hooked.js

import React, { useEffect, useContext, useRef } from 'react';

export const NodeMounter = props => {
    const ref = useRef('');
    const { node } = props;
    ref.appendChild(node);

    useEffect(( {node: prevNode} ) => {
        const { node } = props;
        ref.current.removeChild(prevNode);
        ref.current.appendChild(node);

        return () => {
            const { node } = props;
            ref.current.removeChild(node);
        }
    });
    return <g ref={ref} />;
};

export const RoughContext = React.createContext();

That will actually make the NodeMounter rerender as much time as the SVG changes. No check for changes in node. You'd have to use react-testing-library to test for hooks, and we currently don't have that. There's a utility there called testHooks that'll help with that.

One more thing, if NodeMounter changes to a functional component, then ReactRough component will have to be changed as well, so we'll be fully on hooks.

Hmm. Interesting, any plan on moving to hooks soon ?

Yeah, I'm kinda busy at the moment tho 😅
Working on an IVR.

Mind if I rewrite to use hook since it's an open source project ?. It'd be a nice way to learn React more 😄

Still learning how to write hooks. Sadly, I wrote this ( pardon me if it's bad code, I fore apologise ): Anyways, here is the ReactRough component. But, test doesn't pass 😢 . The reason the test doesn't pass is because there's smtn I'm not doing right in the Context Consumer-Provider API.

const ReactRough = (props, rc, ctx, rendererRef)  => {

    const { renderer, width, height, backgroundColor } = props;

    const forceUpdate = useForceUpdate();

    rendererRef = useRef();

    useEffect(() => {
        const { renderer } = props;
        ctx =
            renderer === 'canvas' && rendererRef.current.getContext('2d');
        rc = Rough[renderer](rendererRef.current);
        // TODO: this.forceUpdate();
        forceUpdate();
    }, []);


    const clearCanvas = () => {
        const { backgroundColor, width, height } = props;
        // If this is the first render the ctx will be null
        // It will be cleared later in the useEffect arc
        if ( !ctx ) {
            return;
        }

        if ( backgroundColor ) {
            ctx.save();
            ctx.fillstyle = backgroundColor;
            ctx.fillRect(0, 0, width, height);
            ctx.restore();
        } else {
            ctx.clearRect(0, 0, width, height);
        }
    };

    const redraw = () => forceUpdate();

    // let children = props.children;


    const rendererOptions = {
        width,
        height
    };

//    First clear the canvas in case of a new render.
    if ( renderer === 'canvas') {
        clearCanvas();
    } else {
        rendererOptions.style = { backgroundColor };
    }

    const Renderer = renderer;

    return (
        <RoughContext.Provider value={{ rc: rc, renderer}}>
            <Renderer {...rendererOptions} ref={rendererRef}>
                {props.children}
            </Renderer>
        </RoughContext.Provider>
    );

};

@ooade.