Reading 28 - AvreyBrown-401-advanced-javascript/seattle-javascript-401d32 GitHub Wiki

Differences between functional and class-Components

Syntax

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. A class component requires you to extend from React.Component and create a render function which returns a React element.

State

Because a functional component is just a plain JavaScript function, you cannot use setState() in your component. That’s the reason why they also get called functional stateless components. So everytime you see a functional component you can be sure that this particular component doesn’t have its own state. If you need a state in your component you will either need to create a class component or you lift the state up to the parent component and pass it down the functional component via props.

Lifecycle Hooks

Another feature which you cannot use in functional components are lifecycle hooks. The reason is the same like for state, all lifecycle hooks are coming from the React.Component which you extend from in class components. So if you need lifecycle hooks you should probably use a class component.

there are some benefits you get by using functional components in React: 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

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:

React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.