React acquaints a component model to form your UI. There are two or three different ways of delivering a component/JSX.
You can utilize these simples rules to figure out what direction to compose your segment
It’s feasible to compose components utilizing classes or capacities. When utilizing classes what we do is broaden either React’s Component or PureComponent.
import { Component, PureComponent } from ‘react’;
class YourCoolComponent extends Component {
…
}
class YourCoolPureComponent extends PureComponent {
…
}
.
Both Component and PureComponent give us admittance to React’s state handler and lifecycles.
The distinction between both is PureComponent executes the should Component Update lifecycle. Components can likewise be any type of function as long as it returns a valid React Node.
// flow
type ReactNode = ReactChild | ReactFragment | ReactPortal | string | number | boolean | null | undefined;
When utilizing capacities it’s all the more entirely expected to utilize arrow functions appointed to a const variable.
const FunctionComponent = (props) => (
<div>
<h1>Hello world</h1>
</div>
);
function FunctionComponentTwo(props) {
return (
<div>
<h1>Hello world</h1>
</div>
);
};
Determine Which to Use
We will utilize class components each time we need to utilize either lifecycles and/or states. That is the reason function components are viewed as Stateless Functional Components or Dumb Components.
Second, when we need a re-delivering aware component we should utilize a PureComponent or execute a class component with should Component Update.
Components can re-render each time props change, however, we may not generally need that re-render. It is majorly used by web design companies.
A typical situation is a point at which the parent and a sibling component refreshes, this can cause a re-render.
To keep away from this you can use should Component Update or simply expand the PureComponent.
See Also: Top 5 Object-Oriented Programming Languages
For each and every other case your part ought to be a Stateless Functional Component, it delivers quicker. With practical parts, you can utilize them in two ways. You can pronounce them in JSX as an ordinary component or call it a function.
// Inside React Component.
render () {
return (
<div>
<HeaderComponent />
<FunctionComponent />
{functionalComponentTwo()}
</div>
)
}
Both FunctionComponent and functionalComponentTwo could be composed the same way, simply recollecting how you would get to props, as a JSX component the props are passed as an item to the first argument of the FunctionComponent, while calling a function you would pass your props as arguments to the function then, at that point access it of course.
A normal function is the quickest, however, it’s simply 1ms faster which would not actually impact the overall performance.
Since a function component gets launched as a class component in the background, it’s simply 14% faster than a class component, React’s core team has expressed their goals to upgrade Function Components, in spite of the fact that there has been no plan to when.
To keep consistency always utilizes your Stateless Function Components as JSX segments rather than functions in JSX.
Be that as it may, here is a situation where it very well may be intriguing to just call a capacity inside JSX. When separating the rendering technique, in situations where your JSX tree can be separated into parts, you can do as follow.
class App extends React.Component {
…
renderHeader = () => {
return <h1>HEADER</h1>;
}
render () {
return (
<div>
{this.renderHeader()}
<h1>Hello world</h1>
<PageContent />
</div>
)
}
}
In case you’re not getting to values from the either the state or props you don’t have to start up it inside the class.
const renderHeader = () => <h1>HEADER</h1>;
class App extends React.Component {
…
render () {
return (
<div>
{renderHeader()}
<h1>Hello world</h1>
<PageContent />
</div>
)
}
}