I don't know why the infinite scroll made of react doesn't work.
Here's what I think.
Connected Element Detection
isFetching = true
setTest()
const [isFetching, setIsFetching] = useState(false);
useEffect(() => {
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setIsFetching(true);
}
});
setIsFetching(false);
});
io.observe(document.getElementById("finish")!);
return () => io.disconnect();
}, []);
useEffect(() => {
if (!isFetching) return;
setTest([...test, 1]);
}, [isFetching, test]);```
Related
i've implemented infinite scroll hook for my newspage
const [posts, setPosts] = useState([]);
const [currentOffset, setCurrentOffset] = useState(0);
const [isLoading, setLoading] = useState(true);
const [isFetching, setIsFetching] = useState(false);
let loadThreePosts = () => {
axios.get(`/news?limit=3&offset=${currentOffset}`).then(({ data }) => {
let threePosts = [];
console.log(data);
data.data.forEach((p) => threePosts.push(p));
setPosts((posts) => [...posts, ...threePosts]);
setLoading(false);
});
setCurrentOffset(currentOffset + 3);
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
useEffect(() => {
if (!isFetching) return;
fetchMorePosts();
}, [isFetching]);
function handleScroll() {
if (
window.innerHeight + document.documentElement.scrollTop !==
document.documentElement.offsetHeight ||
isFetching
)
return;
setIsFetching(true);
}
function fetchMorePosts() {
setTimeout(() => {
loadThreePosts();
setIsFetching(false);
}, 2000);
}
So if i go to the newspage throw the Link on my site it fetching posts as i need,
but if i paste newspage link in browser address bar it's not fetch anything
Change your code to this:
useEffect(() => {
window.addEventListener("scroll", handleScroll);
handleScroll(); // Call handleScroll function
return () => window.removeEventListener("scroll", handleScroll);
}, []);
I'm using IntersectionObserver to implement an infinite scroll.
It works well in desktop view, but in mobile view, the scroll moves to the top whenever the isVisible of the source code below changes.
This is not what I want to do.
const targetRef = useRef<HTMLDivElement>(null);
const [isVisible, setIsVisible] = useState(false);
const callbackFunction = (entries: IntersectionObserverEntry[]) => {
if (entries[0].isIntersecting) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};
useEffect(() => {
const observer = new IntersectionObserver(callbackFunction, {
root: null,
rootMargin: '1px',
threshold: 0.1,
});
targetRef.current && observer.observe(targetRef.current);
return () => {
observer.disconnect();
};
}, []);
useEffect(() => {
if (!isVisible || cursor === null) return;
dispatch(getDrawings({ userId: Number(profileId), cursor: cursor }))
.unwrap()
.then((res) => {
const { newCursor } = res;
console.log({ newCursor });
setCursor(newCursor);
});
}, [isVisible]);
Can you help me solve this problem?
That's the warning in the console,
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Here is my code
const [index, setIndex] = useState(0);
const [refreshing, setRefreshing] = useState(false);
const refContainer: any = useRef();
const [selectedIndex, setSelectedIndex] = useState(0);
const navigation = useNavigation();
useEffect(() => {
refContainer.current.scrollToIndex({animated: true, index});
}, [index]);
const theNext = (index: number) => {
if (index < departments.length - 1) {
setIndex(index + 1);
setSelectedIndex(index + 1);
}
};
setTimeout(() => {
theNext(index);
if (index === departments.length - 1) {
setIndex(0);
setSelectedIndex(0);
}
}, 4000);
const onRefresh = () => {
if (refreshing === false) {
setRefreshing(true);
setTimeout(() => {
setRefreshing(false);
}, 2000);
}
};
What should I do to make clean up?
I tried to do many things but the warning doesn't disappear
setTimeout need to use in useEffect instead. And add clear timeout in return
useEffect(() => {
const timeOut = setTimeout(() => {
theNext(index);
if (index === departments.length - 1) {
setIndex(0);
setSelectedIndex(0);
}
}, 4000);
return () => {
if (timeOut) {
clearTimeout(timeOut);
}
};
}, []);
Here is a simple solution. first of all, you have to remove all the timers like this.
useEffect(() => {
return () => remover timers here ;
},[])
and put this
import React, { useEffect,useRef, useState } from 'react'
const Example = () => {
const isScreenMounted = useRef(true)
useEffect(() => {
isScreenMounted.current = true
return () => isScreenMounted.current = false
},[])
const somefunction = () => {
// put this statement before every state update and you will never get that earrning
if(!isScreenMounted.current) return;
/// put here state update function
}
return null
}
export default Example;
const useChat = () => {
const [messages, setMessages] = useState([]);
const socketRef = useRef();
const { chatId } = useSelector(state => state.chatin)
const { chatList } = useSelector(state => state.chatin)
const dispatch = useDispatch()
useEffect(() => {
socketRef.current = io(socketClient);
socketClient.on('chat', (data) => {
const targetMessage = (messages) => messages.findIndex(item => item.message_number === data.message_number);
console.log('targetMessage', targetMessage)
if (targetMessage !== -1) {
messages[targetMessage].is_hide = true;
}
setMessages((messages) => [...messages, data]);
});
return () => {
socketRef.current.disconnect();
};
}, []);
whenever I got new socket data, I wanna change 'messages' data, but can't access it, because it always shows initial data value.After that I have a question about how can I set it?
You can move the if condition inside setMessages function, this way you will get access to the current state:
socketClient.on('chat', (data) => {
setMessages((messages) => {
const targetMessage = messages.findIndex(item => item.message_number === data.message_number);
if (targetMessage !== -1) {
messages[targetMessage].is_hide = true;
}
return [...messages, data]
});
});
I'm not understanding why the following code, the callback onSocketMessage is not using the new acquisition state. inside the useEffect the state is correctly updated, but the function is not evaluated again...i've also tryed using useCallback with acquisition as dependency but nothing changed.
const Ac = () => {
const [acquisition, setAcquisition] = useState({ data: {} })
const [loading, setLoading] = useState(true)
const socket = useRef(null);
const onSocketMessage = (message) => {
console.log(acquisition) // this is always initial state
let { data } = acquisition
data.input[message.index] = message.input
setAcquisition(prevState => ({ ...prevState, data }));
}
useEffect(() => {
fetchCurrentAcquisition(acquisition => {
setAcquisition(acquisition)
setLoading(false)
socket.current = newSocket('/acquisition', () => console.log('connected'), onSocketMessage);
})
return () => socket.current.disconnect()
}, [])
console.log(acquisition)
You are logging a stale closure you should try the following instead:
const onSocketMessage = useCallback((message) => {
setAcquisition((acquisition) => {
//use acquisition in the callback
console.log(acquisition);
//you were mutating state here before
return {
...acquisition,
data: {
...acquisition.data,
input: {
//not sure if this is an array or not
//assimung it is an object
...acquisition.data.input,
[message.index]: message.input,
},
},
};
});
}, []); //only created on mount
useEffect(() => {
fetchCurrentAcquisition((acquisition) => {
setAcquisition(acquisition);
setLoading(false);
socket.current = newSocket(
'/acquisition',
() => console.log('connected'),
onSocketMessage
);
});
return () => socket.current.disconnect();
//onSocketMessage is a dependency of the effect
}, [onSocketMessage]);