Where should functions in function components go?

by

The first thing to note is that stateless functional components cannot have methods: You shouldn’t count on calling update or draw on a rendered Ball if it is a stateless functional component.

In most cases you should declare the functions outside the component function so you declare them only once and always reuse the same reference. When you declare the function inside, every time the component is rendered the function will be defined again.

There are cases in which you will need to define a function inside the component to, for example, assign it as an event handler that behaves differently based on the properties of the component. But still you could define the function outside Ball and bind it with the properties, making the code much cleaner and making the update or draw functions reusable:

// you can use update somewhere else
const update = (propX, a, b) => { ... };
    
const Ball = props => (
  <Something onClick={update.bind(null, props.x)} />
);

If you’re using hooks, you can use useCallback to ensure the function is only redefined when any of its dependencies change (props.x in this case):

const Ball = props => {
  const onClick = useCallback((a, b) => {
    // do something with a, b and props.x
  }, [props.x]);

  return (
    <Something onClick={onClick} />
  );
}

This is the wrong way:

const Ball = props => {
  function update(a, b) {
    // props.x is visible here
  }
    
  return (
    <Something onClick={update} />
  );
}

When using useCallback, defining the update function in the useCallback hook itself or outside the component becomes a design decision more than anything: You should take into account if you’re going to reuse update and/or if you need to access the scope of the component’s closure to, for example, read/write to the state. Personally I choose to define it inside the component by default and make it reusable only if the need arises, to prevent over-engineering from the start. On top of that, reusing application logic is better done with more specific hooks, leaving components for presentational purposes. Defining the function outside the component while using hooks really depends on the grade of decoupling from React you want for your application logic.

Another common discussion about useCallback is whether to always use it for every function or not. That is, treat is as opt-in or always recommendable. I would argue to always use useCallback: I’ve seen many bugs caused by not wrapping a function in useCallback and not a single scenario where doing so affects the performance or logic in any way. In most cases, you want to keep a reference while the dependencies don’t change, so you can use the function itself as a dependency for other effects, memos or callback. In many cases the callback will be passed as a prop to other elements, and if you memoized it with useCallback you won’t change the props (thus re-render) other components independently of how cheap or costly that would be. I’ve seen many thousands of functions declared in components and not a single case in which using useCallback would have any down side. On the other hand most functions not memoized with useCallback would eventually be changed to do so, causing serious bugs or performance issues if the developer doesn’t recognize the implications of not doing so. Technically there is a performance hit by using useCallback, as you would be creating and additional function but it is negligible compared to the re-declaration of the function that always has to happen either you use useCallback or not and the overall footprint of React and JavaScript. So, if you are really concerned about the performance impact of useCallback versus not using it, you should be questioning yourself if React is the right tool for the job.

More Related Contents:

  1. How to Call a Function inside a Render in React/Jsx
  2. Why do we need middleware for async flow in Redux?
  3. jQuery 1.9 .live() is not a function
  4. Calling a function every 60 seconds
  5. Are “(function ( ) { } ) ( )” and “(function ( ) { } ( ) )” functionally equal in JavaScript? [duplicate]
  6. Make React useEffect hook not run on initial render
  7. Push method in React Hooks (useState)?
  8. Rendering raw html with reactjs
  9. How to add an object to an array
  10. Is it possible to get all arguments of a function as single object inside that function?
  11. Correct way to handle conditional styling in React
  12. Intercept/handle browser’s back button in React-router?
  13. Is it possible to share states between components using the useState() hook in React?
  14. react router doesn’t work in aws s3 bucket
  15. Multiple path names for a same component in React Router
  16. Javascript functions like “var foo = function bar() …”?
  17. How do you send images to node js with Axios?
  18. React useState hook event handler using initial state
  19. How do I setState for nested object?
  20. First Load JS shared by all is rather heavy in next.js
  21. useEffect is running twice on mount in React
  22. React – useState – why setTimeout function does not have latest state value?
  23. How to create a protected route with react-router-dom?
  24. “You may need an additional loader to handle the result of these loaders.”
  25. Only numbers. Input number in React
  26. Disable chrome react DevTools for production
  27. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  28. Passing a function with arguments as an argument?
  29. How can I redirect in React Router v6?
  30. javascript click event handler fires without clicking

Leave a Comment