score:2

Accepted answer

Thanks for the help folks, the issue seems to be down inside a dependency of <MapComponent/>. It ended up saving a reference to the old callback on construction. Still a caveat to watch for, and which i probably wouldnt face with class components...

//something like this
class MapComponent {
   emitter = this.props.onChange //BAD
   emitter = (...i) => this.props.onChange(...i) //mmkay
}

score:0

Thanks to your answer it helped me debug mine which was a bit different. Mine was not working because the callback reference was kept in a state value of the child component.

const onElementAdd = useCallBack(...)..
<Dropzone onElementAdded={props.onElementAdded} />

export const Dropzone = (props: DropzoneProps): JSX.Element => {
    const [{ isOver }, drop] = useDrop(
        () => ({
        accept: props.acceptedTypes,
        drop: (item: BuilderWidget, monitor): void => {
            if (monitor.didDrop()) return;
            props.onElementAdded(item);
        },
    }),
    // missed props.onElementAdded here
    [props.onElementAdded, props.acceptedTypes, props.disabled],
);

score:1

I think event.coordinates is undefined so event.coordinates[0] causes an error.

If you do: setTooltip({working:'fine'}); you'll get type errors but it does set the toolTip state and re renders.


Related Query

More Query from same tag