Background: This is a practice todo list app where I'm using onValue to listen to changes to the list of todos in realtime database, and then mapping that onto a tasks array in the front end.

I previously had a memory leak error appear when using onValue in the following manner - when I didn't unsubscribe from my onValue listener:

  useEffect(
    () => {
      if (user) {

    onValue(ref(database, `users/${user}/tasks`), (snapshot) => {
      const todos = snapshot.val();

      const tasks = [];

      for (let id in todos) {
        tasks.push({ ...todos[id], id: id })
      }

      setTasks(tasks)
    })
    
  } else {
    setTasks([])
  }
}, [user])

I saw from some other questions here that onValue returns an unsubscribe function, and I also saw an answer that by adding return to the onValue line, I could unsubscribe from it - I've tried to do this below:

 useEffect(
    () => {
      if (user) {

        return onValue(ref(database, `users/${user}/tasks`), (snapshot) => {
          const todos = snapshot.val();

          const tasks = [];

          for (let id in todos) {
            tasks.push({ ...todos[id], id: id })
          }

          setTasks(tasks)
        })
        
      } else {
        setTasks([])
      }
    }, [user])

It seems to work for me, but could I get some help to confirm that this is the proper way to unsubscribe from this onValue listener?