Tengo el siguiente código donde los cambios en el componente principal provocan que el elemento secundario se reproduzca. Básicamente, el componente Menú debería aparecer haciendo clic con el botón derecho en la parte superior de la etiqueta del marcador de posición, pero cuando aparece, todo el componente principal parpadea. Usé Usecallback sin suerte. Probé useMemo pero no acepta ningún argumento. Dado que mis funciones de devolución de llamada se activan como resultado de eventos, es importante pasar el objetivo del evento. Por lo tanto, debo pasar el argumento. Agradezco cualquier sugerencia.

 const [menu, setMenu] = useState({isActive: false, position: undefined}); <div className='placeholder' onClick={clickHandler} onContextMenu={rightClickHandler}> {menu.isActive && <Menu menu={menu} />} {[props.entity].map(plc => { let Content = place[props.entity]; if(Content) { return <Content key={Math.random()} /> } })} </div> const rightClickHandler = useCallback((e) => { e.preventDefault(); const parentPosition = e.target.getBoundingClientRect(); const position = { left: e.clientX - parentPosition.left, top: e.clientY - parentPosition.top }; setMenu( { isActive: (menu.isActive ? menu.isActive: !menu.isActive), position: { left: position.left, top: position.top } } ); }, []); const clickHandler = useCallback((e) => { setMenu({isActive: false, module: '', position: undefined}); }, []);