Performance improvement strategies in Redux. Use memoized selectors to avoid redundant derivations in your mapStateToProps. Divide and flatten your reducers to prevent unnecessary re-renders of components.

1. SELECTORS and
NORMALIZING STATE SHAPE
Improving performance in Redux
Muntasir Chowdhury

2. mapStateToProps()

3. const mapStateToProps = state => {
return {
attributeOne: state.attributeOne,
attributeTwo: state.attributeTwo,
};
}

4. mapStateToProps()
1. Runs when any part of the Redux store updates
2. Shallow compare of computed values (previous and new)
Shallow Compare
Render Do nothing
Not equal Equal

5. What is a selector?

6. What is a selector?
Code that derives data

7. mapStateToProps = state => ( { articles: state.articles });
A simple selector

8. mapStateToProps = state => ( {
firstThreeArticles: state.articles.splice(0, 3)
});
Transform Data

9. function getFirstThreeArticles(state) {
return state.articles.slice(0, 3);
}
mapStateToProps = state => ( {
firstThreeArticles: getFirstThreeArticles(state)
});
Extract to function

10. Adding complexity

11. function filterArticles(articles, filter) {
switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
return articles.filter(a => a.unread);
“READ”:
return articles.filter(a => !a.unread);
}
}
mapStateToProps = state => ( {
articles: filterArticles(state.articles, state.filter)
});

12. function filterArticles(articles, filter) {
switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
return articles.filter(a => a.unread);
“READ”:
return articles.filter(a => !a.unread);
}
}
mapStateToProps = state => ( {
articles: filterArticles(state.articles, state.filter),
usersOnline: state.usersOnline
});

13. Redundant derivations

14. function filterArticles(articles, filter) {
switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
return articles.filter(a => a.unread);
“READ”:
return articles.filter(a => !a.unread);
}
}
mapStateToProps = state => ( {
articles: filterArticles(state.articles, state.filter),
usersOnline: state.usersOnline
});
state = {
articles: [......],
filter: "UNREAD",
usersOnline: 1629
}

15. function filterArticles(articles, filter) {
switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
return articles.filter(a => a.unread);
“READ”:
return articles.filter(a => !a.unread);
}
}
mapStateToProps = state => ( {
articles: filterArticles(state.articles, state.filter),
usersOnline: state.usersOnline
});
state = {
articles: [......],
filter: "UNREAD",
usersOnline: 1629
}
state = {
articles: [......],
filter: "UNREAD",
usersOnline: 2004
}

16. Memoized Selectors

17. Reselector

18. createSelector( )

19. createSelector( [selector1, selector2...], transformFunction)

20. function filterArticles(articles, filter) {
switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
return articles.filter(a => a.unread);
“READ”:
return articles.filter(a => !a.unread);
}
}
mapStateToProps = state => ( {
articles: filterArticles(state.articles, state.filter),
usersOnline: state.usersOnline
});

21. import { createSelector } from 'reselect'
const getFilter = (state) => state.filter;
const getArticles = (state) => state.articles;
export const filterArticles = createSelector(
[ getFilter, getArticles ],
(articles, filter) => {
switch(filter) {
“SHOW_ALL”:
return articles;
“UNREAD”:
return articles.filter(a => a.unread);
“READ”:
return articles.filter(a => !a.unread);
}
}
)

22. Connect Selector to Redux Store

23. import { connect } from 'react-redux';
import Articles from '../components/TodoList';
import { filterArticles } from '../selectors';
const mapStateToProps = state => {
return {
articles: filterArticles(state),
usersOnline: state.usersOnline
}
}
const ArticleList = connect(mapStateToProps, null)(Articles)
export default ArticleList

24. NORMALIZING STATE SHAPE
Nested State vs
Normalized State

25. Nested State

26. const articles = [
{
id : "artcle1",
user : {userId: “ui1”, username : "user1", name : "User 1"},
body : "......",
comments : [
{
id : "comment1",
user : {userId: "ui2", username : "user2", name : "User 2"},
comment : ".....",
},
{
id : "comment2",
user : {userId: "ui3", username : "user3", name : "User 3"},
comment : ".....",
}
]
},
Nested State

27. {
id : "article2",
user : {username : "user2", name : "User 2"},
body : "......",
comments : [
{
id : "comment3",
user : {userId: "ui3", username : "user3", name : "User 3"},
comment : ".....",
},
{
id : "comment4",
user : {userId: "ui1", username : "user1", name : "User 1"},
comment : ".....",
}
]
}
……
];
Nested State

28. //articleListContainer.js
mapStateToProps = (state) => ({
articles: state.articles
});
// articleList.js
const ArticleList = (articles) => ({
articles.map(article => <Article article=article />)
});
Selecting Nested State

29. // article.js
const Article = (article) => ({
<div>article.content</div>
{ article.comments.forEach(comments) => <Comment comment=comment /> }
});
// comment.js
const Comment = (comment) => ({
<div>comment.content</div>
<User user=comment.user />
});
Selecting Nested State

30. // user.js
const User = (user) => ({
<div>user.name</div>
});
Selecting Nested State

31. ArticleList
Article
Comment
User
User
Comment …..
Article …..

32. ArticleList
Article
Comment
User
User
Comment …..
Article …..
Redux Storeconnect()

33. //action.js
function changeUserName(userId, name) {
return {
type: CHANGE_USER_NAME,
payload: {
name
}
};
}
Updating Nested State

34. //reducer.js
const posts = (state, action) => {
switch(action.type) {
case "CHANGE_USER_NAME":
// find every post
// where the user as the author of the post
// or as the author of one of its comments
}
}
Updating Nested State

35. 1. Difficult to update
a. Duplicate data
b. Complex reducer logic due to nesting
2. Higher chance of redundant re-renders
Nested State

36. Normalized State
Divide & Flatten

37. //articles_reducer.js
articles : {
byId : {
"article1" : {
id : "article1",
user : "user1",
body : "......",
comments : ["comment1", "comment2"]
},
"article2" : {
id : "article2",
user : "user2",
body : "......",
comments : ["comment3", "comment4", "comment5"]
}
},
allIds : ["article1", "article2"]
}
Normalized State

38. //comments_reducer.js
comments : {
byId : {
"comment1" : {
id : "comment1",
user : "user2",
comment : ".....",
},
"comment2" : {
id : "comment2",
user : "user3",
comment : ".....",
},
"comment3" : {
id : "comment3",
user : "user3",
comment : ".....",
}
},
allIds : ["comment1", "comment2", "comment3"]
}
Normalized State

39. //users_reducer.js
users : {
byId : {
"user1" : {
username : "user1",
name : "User 1",
}
"user2" : {
username : "user2",
name : "User 2",
}
"user3" : {
username : "user3",
name : "User 3",
}
},
allIds : ["user1", "user2", "user3"]
}
Normalized State

40. //articleListContainer.js
mapStateToProps = (state) => ({
articles: state.articles.allIds
});
// articleList.js
const ArticleList = (articleIds) => ({
articles.map(articleId => <Article articleId=articleId />)
});
Selecting Normalized State

41. // article.js
const Article = (article) => ({
<div>article.content</div>
{ article.comments.map(commentIds => <CommentContainer commentId=commentId /> }
});
Selecting Normalized State

42. Selecting Normalized State
//commentContainer.js
mapStateToProps = (state, ownProps) => ({
comment: state.comments.byId[ownProps.commentId]
});
// comment.js
const Comment = (comment) => ({
<div>comment.content</div>
<UserContainer user=comment.user />
});

43. Selecting Normalized State
//userContainer.js
mapStateToProps = (state, ownProps) => ({
user: state.user.byId[ownProps.userId]
});
// user.js
const User = (user) => ({
<div>user.name</div>
});

44. ArticleList
Article
Comment
User
User
Comment …..
Article …..

45. ArticleList
Article
Comment
User
User
Comment …..
Article …..
Redux Storeconnect()
connect()
connect()
connect()

46. //action.js
function changeUserName(userId, name) {
return {
type: CHANGE_USER_NAME,
payload: {
name
}
};
}
Updating Normalized
State

47. //userReducer.js
const usersById = (state, action) => {
switch(action.type) {
case "CHANGE_USER_NAME":
userId = action.payload.id;
changedUser = {
...state[userId],
name: action.payload.name
};
return {
...state,
[userId] : changedUser
};
default:
return state;
}
}
const usersReducer = combineReducers({
byId: usersById,
allIds: [....]
});
Updating Normalized State

48. Normalized State
1. Easy to update
a. Single copy of data
b. Reducer logic more manageable (less nesting)
2. More connected & independent components -> less re-renders

49. Other Topics
● Multiple instances of memoized selectors
● Relationships and Tables (treating Redux like a relational DB)
● Normalizing nested data from API using Normalizr

50. QUESTIONS