I'm new to React Native and I'm planning to work with react hooks. But in order to use hooks I need to implement functional component instead of class component. So what are the major difference between them.
3 Answers
Class Components
Class components are JavaScript ES2015 classes that extend a base class from React called Component
class App extends Component {
render () {
return (
<Text>Hello World!</Text>
)
}
}
This gives the class App access to the React lifecycle methods like render as well state/props functionality from the parent.
Functional Components
Functional components are simpler. They don’t manage their own state or have access to the lifecycle methods provided by React Native. They are literally plain old JavaScript functions. They are also known as stateless components.
const PageOne = () => {
return (
<Text>Hello World!</Text>
);
}
Conclusion
Class components are used as container components to handle state management and wrap child components. Functional components generally are just used for display purposes - these components call functions from parent components to handle user interactions or state updates.
Comments
Functional components were the one where you dont have access to any lifecycle methods of react and even local state. Its jjst a pure function.
In class based components you have access to lifecycle like , componentDidMount and can have a local state for that particular class.
Recently dan abramov introduced react hooks, which are functional components but have access to react lifecycle methods.
This link react-hooks explains in details by comparing react class based components with react hooks.
Hopeit helps. feel free for doubts
Comments
The most obvious one difference is the syntax. A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.
Class components are used as container components to handle state management and wrap child components. Functional components generally are just used for display purposes - these components call functions from parent components to handle user interactions or state updates.
- Functional component are much easier to read and test because they
are plain JavaScript functions without state or lifecycle-hooks You
end up with less code They help you to use best practices.
- It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component The React team mentioned that there may be a performance boost for functional component in future React versions
java Script fuction
function Test (props) {
return <h1>Hello, {props.name}</h1>;
}
class function
class Test extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
