Understanding JSX in React

Question

So I get whats going on but I also dont get whats going on. What I mean is this, I got the code below (see below code) from the react website and I am going through the process of understanding react and how to use it properly. So my question is this, why are the variables "firstName" and "lastName" declared outside the scope of the function they will be used in? like wouldn't be easier to declare the variables in the very scope of the function?

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

Nicholas Tower · Accepted Answer · 2022-07-08 14:27:30Z

5

I see two possibilities:

formatName is a helper function that's potentially called multiple times, with different data. If that's the case, then you can't define the data inside the function, since it will be different each time. If this is the scenario we're in, then i think the code you showed makes sense.
formatName is called exactly once, so the data is always the same. In that case, i agree you could put the data inside the function. But at that point, you could also just delete the function and calculate the formatted name inline. Keeping it as a one-time-use function would only be useful if it helps with readability.

edited Jul 8, 2022 at 14:27

answered Jul 8, 2022 at 14:24

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shahin Nazer Over a year ago

Adding to this, it is the component (class component or functional component) that needs to be encapsulated; it should have the stuff it needs mostly inside

Gavin Morrow · Accepted Answer · 2022-07-08 14:25:11Z

0

When the user variable is declared outside the function, the data can be changed elsewhere, and the function doesn't need to know how to get the data — it just need to know the values of the data.

answered Jul 8, 2022 at 14:25

Gavin Morrow

7891 gold badge7 silver badges21 bronze badges

Comments

user15042229 · Accepted Answer · 2022-07-08 14:41:36Z

0

as I know, if we declare a function/variable inside function component, it will create new function/object every render, let say we use a component inside loop process, it will affect memory of the user browser. so create a function that do something outside function component is best practice.

answered Jul 8, 2022 at 14:41

user15042229

Collectives™ on Stack Overflow

Understanding JSX in React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related