ReactJS defaultProps empty function declaration

Question

What is the best practice defining a function defaultProps that is empty in ReactJS?

My solution so far is either an empty arrow function or a null value. Which way would be better?

MyComponent.defaultProps = {
  onClick: () => {},
  onClickNull: null,
};

I think this depends on the situation whether "null" could mean something in your code. "null" means having no data, so if your code has a logic that handles differently whether onClick is defined or not, then null else use the null object pattern by declaring () => {}. — dance2die
– dance2die, Commented Jan 3, 2019 at 16:09
It's entirely up to you. If you want your code to know whether the function was provided, use null or undefined or leave the property off the defaults. If you don't need your code to know and want to be able to use it without any checks, use the no-op function. (I usually create a single no-op function I reuse, although with modern engines I guess there's really no good reason for that...) — T.J. Crowder
– T.J. Crowder, Commented Jan 3, 2019 at 16:10
The "no-op" term seems new to me. Thank you for your answer and the new dev term I gained @T.J.Crowder :p — dmraptis
– dmraptis, Commented Jan 3, 2019 at 16:54

Anas · Accepted Answer · 2019-01-03 16:10:50Z

6

I don't think there is a right answer for this.

If you want to be more explicit in your code, go with the null and check if the function is null before calling it.

If you want to have less code, go with empty function.

The more important thing I would say, is to be consistent in the entire project.

answered Jan 3, 2019 at 16:10

Anas

5,7455 gold badges43 silver badges72 bronze badges

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

2 Comments

dmraptis Over a year ago

My main concern was the possibility of performance issues using an empty function. However, your point of view helped me clarify it, thanks @Anas !!

Abhishek Singh Over a year ago

How is having an empty function a performance issue?

canecse · Accepted Answer · 2019-12-11 17:23:09Z

5

Important thing to keep in mind is that an empty function ()=>{} is an object hence its truthy whereas null and undefined are falsy.

So if you want to check whether that event handler prop is passed on implementation and handle both cases (supplied and not supplied) differently, it makes more sense to go with null or undefined.

answered Dec 11, 2019 at 17:23

canecse

1,9323 gold badges17 silver badges21 bronze badges

1 Comment

dmraptis Over a year ago

I faced this issue the other day, thanks for bringing it up!

Collectives™ on Stack Overflow

ReactJS defaultProps empty function declaration

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related