Skip to content

Commit e2ecce4

Browse files
authored
docs(readme): clarify the 'wrap all components' section [skip ci]
1 parent d951a0c commit e2ecce4

File tree

1 file changed

+16
-0
lines changed

1 file changed

+16
-0
lines changed

README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,8 @@ export default view(() => (
271271
<details>
272272
<summary><strong>Wrap ALL of your components with <code>view</code> - including class and function ones - even if they don't seem to directly use a store.</strong></summary>
273273
<p></p>
274+
275+
Every component that is using a store or part of a store inside its render must be wrapped with `view`. Sometimes store usage is not so explicit and easy to to miss.
274276

275277
```jsx
276278
import { view, store } from '@risingstack/react-easy-state';
@@ -294,6 +296,20 @@ const Profile = view(({ user }) => <p>Name: {user.name}</p>);
294296
const Profile = ({ user }) => <p>Name: {user.name}</p>;
295297
```
296298

299+
If you are **100% sure** that your component is not using any stores you can skip the `view` wrapper.
300+
301+
```jsx
302+
import React from 'react';
303+
304+
// you don't have to wrap this component with `view`
305+
export default (() => <p>This is just plain text</p>);
306+
```
307+
308+
`view` wrapping is advised even in these cases though.
309+
310+
- It saves you from future headaches as your project grows and you start to use stores inside these components.
311+
- `view` is pretty much equivalent to `memo` if you don't use any stores. That is nearly always nice to have.
312+
297313
</details>
298314
<p></p>
299315

0 commit comments

Comments
 (0)