In my post "4 Ways of creating React components" I mentioned about the Functional components. In this post we will know more about the functional components.
What is a component?
A component is one of the core building blocks of React. Multiple individual components form a parent component.
Two types of components:
- Functional Components
- Class components (Next post)
Functional Components
Think of functional components as JavaScript functions.
function Welcome(props) {
return <h1> Hey, {props.name} </h1>;
}
// {props.name} => Return value
// (props) => argument
// Welcome => Function name
const elment = <Welcome name="Rahul" />;
//Welcome => call a function
// name="Rahul" => pass arguments
You should never modify props. You should use functional components when Your component simply receives props and render something nad does not have its State.(React < 16.8)
In React 16.8, Functional components can hold stat using React hooks. It's a good practice to use functional components over class components.
Why functional components are better?
Transpiled code by babel as some major differences (Class components resolve to more complex code). Major performance boost for functional components. Cleaner and less code.
Related Posts
😀Thanks For Reading | Happy Coding🤗