Skip to content

Commit

Permalink
docs(readme): clarify the 'wrap all components' section [skip ci]
Browse files Browse the repository at this point in the history
  • Loading branch information
solkimicreb authored Apr 3, 2020
1 parent d951a0c commit e2ecce4
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,8 @@ export default view(() => (
<details>
<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>
<p></p>

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.

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

If you are **100% sure** that your component is not using any stores you can skip the `view` wrapper.

```jsx
import React from 'react';

// you don't have to wrap this component with `view`
export default (() => <p>This is just plain text</p>);
```

`view` wrapping is advised even in these cases though.

- It saves you from future headaches as your project grows and you start to use stores inside these components.
- `view` is pretty much equivalent to `memo` if you don't use any stores. That is nearly always nice to have.

</details>
<p></p>

Expand Down

0 comments on commit e2ecce4

Please sign in to comment.