red-ux

performance utilities for progressive web apps.

take your user experience out of the red

  

---

* React:
* shouldUpdate - reduce unneeded re-rendering
* Redux:
* genSelectState - result caching

---

React: Reduce unneeded re-rendering with shouldUpdate

``JS
import React, {Component} from 'react';
import { shouldUpdate } from 'red-ux'

export class List extends Component {

shouldComponentUpdate(nextProps, nextState){
return shouldUpdate(nextProps, nextState);
}

render() {
return (


{
this.props.data.map(({name,id}) =>
• {name}
)
}

)
}
}
`

---

Redux: Result caching with genSelectState

genSelectState uses Reselect under the hood.

This function will let you wrap computationally expensive logic.

Example; using React & Redux.

* Without genSelectState

`JS
import React, {Component} from 'react';
import { connect } from 'react-redux';

export class List extends Component {

render() {

const posts = this.props.posts.map( post => ({ id: post.uid, name:post.userName }) )

return (


• {this.props.user.name} List
{
posts.map(post =>
• {post.name}
)
}

)
}
}

const map_state_to_props = (state)=>({
user : state.user,
posts : state.posts
}}

export default connect(map_state_to_props)(List);
`

* With genSelectState

`JS
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { genSelectState } from 'red-ux'

export class List extends Component {

render() {

return (


• {this.props.user.name} List
{
this.props.posts.map(post =>
• {post.name}
)
}

)
}
}

const map_state_to_props = (state)=>({
user : state.user,
posts : state.posts
}}

const works = {
posts : posts => posts.map( post => ({ id: post.uid, name:post.userName }))
}

export default connect(genSelectState( map_state_to_props, works ))(List);
`

Now the transformation will only happen once on each if the reference passed in was the same.
This means that the posts transformation will happen on the first call and will return the same calculated value is the posts have not changed.

$3

`JS
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { genSelectState } from 'red-ux'

export class List extends Component {

render() {

return (


• {this.props.user.name} List
{
this.props.posts.map(post =>
• {post.name}
)
}

)
}
}

const selecters = {
user : state => state.user
posts : state => state.posts
}

const works = {
posts : posts => posts.map( post => ({ id: post.uid, name:post.userName }))
}

export default connect(genSelectState( selecter, works ))(List);
`

You pass an Object as the first argument to genSelectState that maps the to select functions

- If you have multiple pieces of state. Pass an Array

`JS
const map_state_to_props = (state)=>({
user : state.user,
posts : [state.posts.a,
state.posts.b]
}}
const works = {
posts : (a,b) => posts.map( post => ({ id: post.uid, name:post.userName }))
}
`
and

`JS
const selecters = {
user : state => state.user
posts : [state => state.posts.a,
state => state.posts.b]
}

const works = {
posts : (a,b) => posts.map( post => ({ id: post.uid, name:post.userName }))
}
`

📌 Note: As an optimization. The works object will has it's properties wrapped. So feel free to call works properties after the fact, knowing your getting optimized results.

`JS
const works = {
foo : (a) => stuff(a),
bar : (a,b) => works.foo(a) + b,
cat : (a,b) => works.bar(a,b) + 1000,
}
`

works.bar` will only be executed once, even though its referenced twice.