All thoughts and posts are my own, said by @rakibtg.
posted at Friday, 25 May 2018
React JS Performance ++
This article is gonna be short. Its about how we can still use Functional Components and boost performance of our react js based applications.
Before we start here is a one liner to "Stateless Functional Component": In react js we can write a simple function that returns a JSX and that function dont have any state of its own is a functional component.
So when I first heard of a functional component I thought it could change the game! But wait, when I saw the tweet by Dan,

There is no “optimized” support for them yet because stateless component is wrapped in a class internally. It's same code path.

Hmmm, I thought it would be a good optimization as it doesn't have to manage any states and kinda the lifecycles is not so effective here in a functional component, but react treat them the same!
...
But there is a nice workaround to achieve the performance boost by writing Stateless Functional Components. I will show you how!
I think it is also important to talk a little about the use cases where it could really shine!
Lets say you will need to refactor a button that only requires some props to work with and in the app the button component should be called too many times.

Here is our button component:

const Button = (props) => {
  return <div
    className="btn-xyz"
    onClick={ props.onClick }>
    { props.title }
  </div>;
}

Now if we call/embed the component as we used to do with a state-full component then it would look like this,
< Button onClick={ this.handleSomething.bind( this ) }
  title="Publish"
/>
That was Okay but as we want the performance boost so we need to utilize the JSX to treat the component as a function. Like this,
{ Button( { title: "Publish" } ) }

Does it work on react native too?
I didn't tested it yet! Let me know...