What is the difference between a Presentational and Container component?

Vaibhav Kothia May 26, 2023 0 Comments

Presentational components are concerned with how things look. They usually receive data and callbacks exclusively via props. These components are usually written as functional components unless they need to use state or lifecycle methods.

Example:

const Button = (props) => {
return {props.text}
}

Container components are concerned with how things work. They are often stateful, as they tend to serve as data sources. These components are usually written as class components.

Example:

class ButtonContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
text: ‘Click Me!’
}
}

handleClick = () => {
this.setState({
text: ‘You clicked!’
});
}

render() {
return
}
}

What are the different ways of creating components in React?

Vaibhav Kothia May 26, 2023 0 Comments

1. Function Components: Function components are the simplest way to define a component in React. It is a JavaScript function that accepts props as an argument and returns a React element.

Example:

const MyComponent = (props) => {
return (

);
};

2. Class Components: Class components are JavaScript classes that extend the base React Component class. They provide more features and capabilities than function components, such as state and lifecycle methods.

Example:

class MyComponent extends React.Component {
render() {
return (

);
}
}

3. Pure Components: Pure components are components that extend the base React.PureComponent class. They are similar to class components in that they can have state and lifecycle methods, but they are optimized for performance by implementing shouldComponentUpdate() with a shallow prop and state comparison.

Example:

class MyComponent extends React.PureComponent {
render() {
return (

);
}
}

4. Stateless Functional Components: Stateless functional components are similar to function components in that they are JavaScript functions that accept props as an argument and return a React element. The difference is that they do not have state or lifecycle methods.

Example:

const MyComponent = (props) => {
return (

);
};