Skip to main content

​
JavaScript Return Behavior in Arrow Functions

Arrow functions in JavaScript can behave unexpectedly, especially when returning JSX or writing multi-line expressions. This guide explains the two most confusing areas: how you structure arrow functions and how you use return.
Arrow functions behave differently based on the body syntax:

​
✅ Case 1: Curly braces {} require return

numbers.map(n => {
  return <li>{n}</li>; // ✅ must use return
});
❌ If you forget return, nothing is returned:
numbers.map(n => {
  <li>{n}</li>; // ❌ returns undefined
});

​
✅ Case 2: Parentheses () means implicit return

numbers.map(n => (
  <li>{n}</li> // ✅ automatically returned
));
❌ But this is invalid:
numbers.map(n => (
  return <li>{n}</li>; // ❌ SyntaxError
));
➤ Summary:
  • {} → must use return
  • () → auto-return, no return allowed
When using the return keyword in a normal function (or inside {} in an arrow function), be careful with how you place JSX.

​
✅ Returning JSX on the same line

return <main>
  Hello
</main>; // ✅ works fine

​
❌ Returning JSX on the next line without wrapping

return
  <main>Hello</main>; // ❌ returns undefined
JavaScript inserts a semicolon after return → return;

​
✅ Proper way to return multi-line JSX

return (
  <main>
    <h1>Hello</h1>
  </main>
);
➤ Summary:
  • return <JSX> on same line → ✅ fine
  • return on one line + JSX on next line → ❌ broken
  • return ( + multi-line JSX + ) → ✅ correct
In React, when rendering lists using methods like .map(), each element in the list should have a unique key prop.The key helps React identify which items have changed, been added, or removed. Without it, React cannot reliably track individual elements during re-rendering, which can lead to inefficient updates or unexpected UI behavior.Even though React will still render the list without a key, it shows a warning in the console and performs less optimally. In dynamic lists, missing keys can also break internal state or cause flickering.The key doesn’t show up in the UI — it’s only for React’s internal diffing algorithm to speed up and stabilize rendering.➤ In short, always include a unique key when rendering lists to ensure performance, consistency, and proper DOM reconciliation.

​
Summary

{} needs return

If you use {} in an arrow function, you must manually write return.

() returns implicitly

If you use (), you cannot use return — the expression is returned automatically.

return on same line works

return <div />; works if JSX is on the same line.

return + newline needs ()

For multi-line JSX after return, wrap it in () to avoid auto semicolon insertion.