I've been working with react for years and I still have a simple question that I could never understand nor get the answer anywhere. Is calling an outside function in react component body bad?

For example:

import { getUser } from './helpers';

function MyComponent() {
  const user = getUser();

  return (
    ...

What will happen to user variable when component gets re-rendered by the parent component? Variables created in component body are created again in memory? Should I use useCallback or useMemo? I feel those two react functions are for other reasons, as expensive calculations and to prevent unecessary prop re-render.

CodePudding user response：

To answer your first question in my experience I've never heard of calling outside functions within a react body as bad. In fact it's always been something that was encouraged especially for helper functions like in your example. There are definitely other ways to handle helper functions that may be needed multiple times (useContext comes to mind) but I don't see anything wrong with importing an outside function to call within a react body.

As far as what happens to user in your example it would get reset to the new return of getUser() upon any component re-render.

CodePudding user response：

The user variable will be set to the value returned by getUser() on each re-render. And yet, getUser() will run on each re-render.

React Hooks are functions with use at the beginning of the function name, documented here.