title: Should I add useCallback or useMemo to my effect?
body: <p>The following tooltip will call the API once the user hovers on a button.
  I wonder if I need to work with <code>useCallback</code> or <code>useMemo</code> to avoid unnecessary API calls? I still struggle to understand when I need one of the two. If it makes sense to add it, how would you do it?</p>
  <pre><code>const ProfileTooltip = ({ children, userId }) =&gt; {
      const classes = useStyles();
      const [open, setOpen] = useState(false);
      const [profileInfo, setProfileInfo] = useState(false);
    
      useEffect(() =&gt; {
        if (!open) {
          return;
        }
    
        const fetchProfileInfo = async () =&gt; {
          try {
            const { data } = await api.get(`users/${userId}/info/`);
            setProfileInfo(data);
          } catch (e) {
            setProfileInfo(null);
          }
        };
        fetchProfileInfo();
      }, [open, userId]);
    
      const handleOpen = () =&gt; {
        setOpen(true);
      };
    
      const handleClose = () =&gt; {
        setOpen(false);
      };
    
      const renderTooltip = () =&gt; {
        if (!profileInfo) {
          return;
        }
    
        return (
          &lt;&gt;
            &lt;h3 className={classes.profileName}&gt;
              {profileInfo.firstName} {profileInfo.lastName}
            &lt;/h3&gt;
            &lt;p className={classes.headline}&gt;{profileInfo.headline}&lt;/p&gt;
            &lt;Button size=&quot;small&quot; variant=&quot;contained&quot; color=&quot;primary&quot; fullWidth&gt;
              Message
            &lt;/Button&gt;
          &lt;/&gt;
        );
      };
    
      return (
        &lt;div className={classes.root}&gt;
          &lt;Tooltip
            arrow
            classes={{
              tooltip: classes.tooltip,
              arrow: classes.arrow,
              tooltipArrow: classes.tooltipArrow,
              popperArrow: classes.popperArrow,
            }}
            interactive
            placement=&quot;top-start&quot;
            onOpen={handleOpen}
            onClose={handleClose}
            title={renderTooltip()}
          &gt;
            {children}
          &lt;/Tooltip&gt;
        &lt;/div&gt;
      );
    };
    
    export default ProfileTooltip;
  </code></pre>