devmeetings-react-ts-fork
Search…
Smart and dumb components
A well-written React app will have two "types" of components: Containers, often called smart and Presentational called dumb.
Before we get to that, let's introduce a couple of concepts by answering these questions:
- what is a pure function?
- what is a side effect?
- what are examples of side effects in frontend applications?
.
.
.
.
.
.
.
.
Pure function
A pure function is a function that always returns the same result given the same arguments and has no side-effects. Those are pure functions:
1
const square = x => x*x
2
3
const getExpensiveBooksCount = (books) => {
4
const expensiveBooks = books.filter(book => book.price > 20)
5
return expensiveBooks.length
6
}
Copied!
Those are not pure:
1
let callCount = 0;
2
const square = x => {
3
callCount++
4
return x*x
5
}
6
7
const fetchBooks = () => getBooks().then(doStuffWithBooks)
8
9
const sleep = time => new Promise(resolve => setTimeout(resolve, time))
Copied!
Side-effect
A side-effect of a function is anything the function does that affects any part of the system outside of the function scope.
Examples of side effects are:
- changing a value of a global variable
- making a network request
- changing the DOM
- logging to a console
- registering a event listener
- using external code might be a side-effect
What is not a side effect:
- changing a value of a local variable
Dumb components
Those components should be pure functions that receive some data from their parent using
props and based on that return JSX element. They have no internal state, very little (or none at all) logic.They are easy to write, easy to understand and easy to test.
Smart components
Usually impure functions, have some internal state, make requests to server, etc. This is where the application logic and 99% of bugs are.
In action
Let's get back to the counting
Clicker component and split it into a smart and a dumb component:1
type ClickerProps = {
2
clicks: number;
3
incrementClicks: () => void;
4
};
5
const Clicker: React.FC<ClickerProps> = ({ clicks, incrementClicks }) => {
6
return <button onClick={incrementClicks}>Clicked {clicks} times</button>;
7
};
8
9
10
const ClickerContainer: React.FC = () => {
11
const [clicks, setClicks] = useState<number>(0);
12
const handleClickerClick = () => {
13
setClicks(clicks + 1);
14
};
15
16
return <Clicker incrementClicks={handleClickerClick} clicks={clicks} />;
17
};
Copied!
The
Clicker now is only concerned about the UI - how the clicker looks. It has clearly defined API, can be changed completely, without risking breaking any logic related to state or potential side-effects. It can be reused by another component, that does something entirely different when the button is clicked.On the other hand, the
ClickerContainer only knows how to update the state in reaction to the incrementClicks event. More abstract application of this pattern is called Higher Order Components or HOC and is a primary (little outdated) tool for sharing code among React components.Resources
Last modified 2yr ago