Why you should stop writing anonymous function in props

Swaraj Gandhi
Sep 4, 2018 · 2 min read

After more than 8 months of my laziness towards learning new things in Javascript, I think to rejuvenate and put my self together again. So, you will be reading more about javascript and might some new thoughts on philosophy and some other stuff (haven’t decided yet :P).

It’s easy to screwed up in Javascript, if you are being lazy and careless while writing code. I faced this issue during my last week’s code review.

I was carelessly writing so many anonymous function in my components props, ignoring what big adverse efficiency effects it can cause to our app. Let’s take a close look into the problem.


We will look into main three points

  1. How it affect the efficiency of the app?
  2. How to prevent it

How it affect the efficiency of the app?

// ...render() {
<div>
<CustomButton
text="click me"
onClick={() => this.setState({ clicked: true })}
/>
</div>
}
// ..
}

In the above snippet, CustomButton is a custom component which will render the text and click method. In that component we may have shouldComponentUpdate method, which will do the shallow comparing, in which it will compare the given props and state of the component, and if has some change, it will re-render the component.(For the latest version of react we can use React.PureComponent to implement shouldComponentUpdate method inbuilt and use that class) This will cut out needless re-renders of the component. Shallow comparing is only useful when you components are passing primitive data types and not objects, arrays or some other kind of javascript object which is passed by reference.

So, we must have shouldComponentUpdate implemented as

shouldComponentUpdate(nextProps) {
return (
this.props.onClicked !== nextProps.onClick ||
this.props.text !== nextProps.text
);
}

Here, whenever we passed the anonymous function to the child component with above method implemented, it will do the shallow compare it will return that previous onClick and current onClick are two different functions because they will redefine/recreate on each cycle. That’s why it will return true and the component will re-render the whole component which was unnecessary.

It will break the intended behaviour of the shouldComponentUpdate method.Here, how we should write so that we can optimize our code.

// ..._handleClick = () => {
this.setState({
clicked: true
});
}

render() {
<div>
<CustomButton
text="click me"
onClick={this._handleClick}
/>
</div>
}
// ..
}

In the above snippet, we are passing the reference of the function, so that during shallow compare it will return false, as our functions reference will never change. Now, even after receiving same props from CustomButton it will not do the unnecessary re-rendring. That’s how it will save lots of re render for the application, it looks like a small problem, but it can improve our code efficiency in good amount.

I hope the above information will help you to improve your code quality and efficiency. That’s it for today. I will be posting out more issues and solutions. Till then, like and comment if you have any other thoughts on it.

Swaraj Gandhi

Written by

Stalker of javascript :P

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade