socket.on listen too much - reactjs

Question

I created a socket in store (socket.store.ts)
constructor() {
this.socket = io.connect(process.env.REACT_APP_SOCKET_URI || '3131');
}
Using that socket in my component. When user click find button, socket emit one time (checked) to backend, backend emit one time (checked) back to event 'finding'. But called printed into console 12 times and even increase rapidly when i re-click find button
const socketStore = useContext(SocketStoreContext);
const socket = socketStore.socket;
// THOUGHT: maybe i will try to create socket inside this component
// const socket = io.connect(process.env.REACT_APP_SOCKET_URI);
socket.on('finding', () => {
console.log('called');
});
const handleFindPartner = () => {
socket.emit('find', {
token: user.token,
});
};
But when I create socket inside my component, called printed exactly one time. Don't know what going on here, really need some help. Thank you you guys so much!

Answer 1

Like #Mike said in comment section. I need to prevent socket.on from re-rendering by putting it in useEffect
const socketStore = useContext(SocketStoreContext);
const socket = socketStore.socket;
// THOUGHT: maybe i will try to create socket inside this component
// const socket = io.connect(process.env.REACT_APP_SOCKET_URI);
React.useEffect(()=>{
socket.on('finding', () => {
console.log('called');
});
},[socket])
const handleFindPartner = () => {
socket.emit('find', {
token: user.token,
});
};