Actualmente tengo un gancho:
function useFollowUser() { const isFollowing = useRef(false); return (userId) => { if(isFollowing.current) return; // mutual exclusion isFollowing.current = true; ... update DB and GUI isFollowing.current = false; } }Luego, lo uso en mi componente FollowButton
function FollowButton({ userId }) { ... const followUser = useFollowUser(); const handleOnPress = () => followUser(userId); return <Button onPress={handleOnPress} text=... /> }El problema es que, si en la misma pantalla tengo dos instancias del mismo componente, con el mismo prop de ID de usuario, habrá algunas inconsistencias en los datos, ya que el método followUser, si el usuario presiona ambos botones al mismo tiempo, podría ejecutarse. en paralelo.
Para resolver este problema asincrónico, ¿es una buena opción mover la lógica del enlace a un proveedor de contexto?
¿Algún otro enfoque?
Puede usar el contexto, pero la forma más simple es simplemente envolver isFollowing en el mismo alcance con funciones autoejecutables. Preste atención a dos corchetes que invocan inmediatamente la función.
const useFollowUser = (() => { let isFollowing = false; return () => { // this is hook context, you can use any effects here return (userId) => { if (isFollowing) return; // mutual exclusion isFollowing = true; // ... update DB and GUI isFollowing = false; }; } })();Uso:
const followUser = useFollowUser();