Javascript, in a React application assign to {} in a function component, code review

Question

I have this code in a friend of mine React application and I need to understand what this code does explicitly:

const Component = ()=> (
  <QueryFetcher>
    {({ data }) => {

      const { user: { profile = {} } = {} } = data

      return (
        <div>
          {profile.username && profile.username}
        </div>
      )
    }}
  </QueryFetcher>
)

What is this line for?

const { user: { profile = {} } = {} } = data

Is it correct to assign something to {} using { user: { profile = {} } = {} } in this functional component? Or in a render() hook of a stateful component in React?

Possible duplicate of What does curly brackets in the `var { ... } = ...` statements do? — Emile Bergeron
– Emile Bergeron, Commented Apr 30, 2019 at 20:34
It's roughly equivalent to const profile = (data && data.user && data.user.profile) || {} — p.s.w.g
– p.s.w.g, Commented Apr 30, 2019 at 20:36
Note that {profile.username && profile.username} is redundant, as {profile.username} should be enough. — Emile Bergeron
– Emile Bergeron, Commented Apr 30, 2019 at 20:42
Note that if data is { user: null }, the destructuring would still fail even with the default values in place. That's something that the answers below are not mentioning and that is a huge source of uncaught errors. — Emile Bergeron
– Emile Bergeron, Commented Apr 30, 2019 at 20:54

Vincent D'amour · Accepted Answer · 2019-04-30 20:56:51Z

4

const { user: { profile = {} } = {} } = data basically means that your retrieving the user profile.

const means that you are creating a new variable

{ user: { profile } } } means that you are retrieving profile inside of user

= {} means that if the object is undefined, use an empty object so it will not fail because doing user.profile will throw an error if user is undefined.

= data means that you retrieving this info from the data variable

So, this line means, from the variable data, go take the user, if the user is undefined, use an empty object. Then, go take the profile, if the profile is undefined, use an empty object. Then create a variable called profile with the result. This is like doing this:

const user = data.user === undefined ? {} : data.user;
const profile = user.profile === undefined ? {} : user.profile;

edited Apr 30, 2019 at 20:56

answered Apr 30, 2019 at 20:37

Vincent D'amour

3,9131 gold badge30 silver badges40 bronze badges

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

5 Comments

Emile Bergeron Over a year ago

"means that if the object is null or undefined", not null, only if it is undefined.

Emile Bergeron Over a year ago

You've missed a couple mentions of null throughout your answer.

Vincent D'amour Over a year ago

Thanks again for your feedback!

Fred Hors Over a year ago

@VincentD'amour is this correct to use this syntax in a render() hook in React?

Vincent D'amour Over a year ago

@FredHors It's a personal preference, I would say it's fine to use this syntax inside render()

Berouminum · Accepted Answer · 2019-04-30 21:07:10Z

3

What is this line for?
const { user: { profile = {} } = {} } = data

It's basically just chained ES6 object-destructuring with default values. What this line does in words:

Read "user" from "data", if "user" is undefined, assign {} as a default value
Read "profile" from "user", if "profile" is undefined, assign {} as a default value

Is it correct

It is mostly a short-hand syntax used to remove repetitive stuff. So instead of accessing multiple object props separately e.g.

this.props.prop1, this.props.prop2, ...

you can use

const { prop1, prop2 } = this.props;

It also helps other readers later quickly understanding what variables are used in a method if all necessary props are destructured at the start.

edited Apr 30, 2019 at 21:07

answered Apr 30, 2019 at 20:42

Berouminum

5304 silver badges8 bronze badges

3 Comments

Emile Bergeron Over a year ago

"if [whatever] is falsy", not falsy, specifically undefined and it's a huge source of uncaught errors.

Fred Hors Over a year ago

Thanks, but is this correct to use this syntax in a render() hook in React?

Berouminum Over a year ago

@FredHors Sure, you can destructure all needed props in render. I personally wouldn't only call it "correct" but even good-practice regarding the readability advantages i mentioned above.

Collectives™ on Stack Overflow

Javascript, in a React application assign to {} in a function component, code review

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related