brigand / brigand/react-scratch

Why render() is called continuously when i use createSelector() in this pattern ?

Open
#3 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
53
Forks
25
PR merge metrics
No merged PRs in 30d

Description

For the reselect-redux example, its not clear why this doesnt work. I see correct output.
But the render method of PostsByUser is being called repeatedly.

I understand that following works i.e. renders correct output and render() method of PostsByUser is called only once.

```js
const makeGetPostsForUser = () => createSelector(
(state, props) => props.user,
(state) => state.postsById,
(state) => state.usersById,
(state) => state.postListing,
(userId, posts, users, listing) => listing
.filter(id => posts[id].author === userId)
.map(id => {
const post = posts[id];
return { ...post, user: users[post.author] }
}),
);

const mapState = () => {
const getPostsForUser = makeGetPostsForUser();
return (state, ownProps) => {
return { posts: getPostsForUser(state, ownProps) };
};
}
```

But its not clear why following code doesnt work: although it renders correct output, the render() method of PostsByUser is called in infinitely loop defeating the purpose of this library.

```js
const getPostsForUser = createSelector(
(state, props) => props.user,
(state) => state.postsById,
(state) => state.usersById,
(state) => state.postListing,
(userId, posts, users, listing) => listing
.filter(id => posts[id].author === userId)
.map(id => {
const post = posts[id];
return { ...post, user: users[post.author] }
}),
);

const mapState = () => {
return (state, ownProps) => {
return { posts: getPostsForUser(state, ownProps) };
};
}
```

Even following code doesnt work: although it renders correct output, the render() method of PostsByUser is called in infinitely loop defeating the purpose of this library.

```js
const getPostsForUser = createSelector(
(state, props) => props.user,
(state) => state.postsById,
(state) => state.usersById,
(state) => state.postListing,
(userId, posts, users, listing) => listing
.filter(id => posts[id].author === userId)
.map(id => {
const post = posts[id];
return { ...post, user: users[post.author] }
}),
);

const mapState = (state, ownProps) => {
return { posts: getPostsForUser(state, ownProps) };
}

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.