What is the difference between a presentational component and a container component?

A presentational component is a React component that is concerned only with how things look. It receives props from its parent component and renders them in a visually appealing way. Presentational components are often stateless functional components.

A container component, on the other hand, is a React component that is concerned with how things work. It is responsible for connecting the presentational components to the Redux store and for dispatching actions in response to user interactions. Container components are often class components that use the connect() function to connect to the Redux store.

Example:

// presentational component
function Counter(props) {
  return (
    <div>
      <h1>{props.count}</h1>
      <button onClick={props.increment}>+</button>
      <button onClick={props.decrement}>-</button>
    </div>
  );
}

// container component
import { connect } from 'react-redux';
import { increment, decrement } from './actions';
import Counter from './Counter';

function mapStateToProps(state) {
  return { count: state.count };
}

const mapDispatchToProps = { increment, decrement };

export default connect(mapStateToProps, mapDispatchToProps)(Counter);