Confused with Fat Arrow (=>) function

Question

Hi I was learning NextJs and find this problem

This Module Works

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);
export default GlobalStyles;

This not

const GlobalStyles = () => {
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
};
export default GlobalStyles;

am really noob can anyone explain?

Answer 1

The first one returns the jsx element implicitly (without you specifying return).

The second one is missing the return statement.

Explanation: in JavaScript when you use an arrow function you can leave off the curly braces ({}) if the only thing you want to do is return a value from the function, however if you do use curly braces you need to actually write return to return whatever you want to return.

Answer 2

When using the brackets {}, you are declaring an arrow function that requires a return statement.

By defining the arrow function with parenthesis, you are only allowed to have a single statement (your definition), which is returned by default.

Your second example would work if you added in a return like so:

const GlobalStyles = () => {
  return (<>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>);
};
export default GlobalStyles;

Answer 3

The answer to this is very simple.

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);

This is equivalent to

const GlobalStyles = () => {
  return (
    <>
      <Global
        styles={css`
          body {
            color: #000000;
          }
        `}
      />
    </>
  );
}

Your second code block does not return anything, so it's the right behavior to render nothing.

Answer 4

It's really good question! Every people didn't care about why it's use?

As the name implies, IIFEs are functions that are executed immediately after they are defined — there’s no need to call them explicitly.

Generally, this is how you define and execute (at a later point) a function:

function myFunction() {

// ...

}

myFunction();

But if you want to execute the function immediately after it is defined, you have to wrap the whole declaration in parentheses (to convert it to an expression) and execute it by adding two more parentheses (passing any arguments the function may take).

Either this way:

( function myFunction(/* arguments */) {
    // ...
}(/* arguments */) );

In TypeScript, you use curly braces to wrap an IIFE, put all the logic you want inside it (if/else, switch, ternary operators, etc.), and return whatever you want to render. For example, here’s how the logic to render the save/edit button could look with an IIFE:

( (/* arguments */) => {
    // ...
} ) (/* arguments */);

I hope my answer help you understand => operator.