CODEWITHSUNDEEP
javascriptreactjsreselect
Max Travis
Max Travis

Reputation: 1318

Reselect. React. Which is the best way of usage the Reselect to gets the maximum perfomance?

I'm not so far ago have met with new to me package as Reselect. I read carefully the official docs and already have an experience with my firsts selectors. But only one thing that I cannot understand - which is the best code architecture of implementation selectors in the components to create the right memoized selectors?

So, I have a 2 basic part of the code (do not be scared of the so huge code amount in this post, it's just mocked, please looks only on code logic structure):

1.The First case, component holds the logic that responses for the right render() of the component inside it own (classic case). It has connected to the Reselect selectors and receives only calculates values that Reselect throws from the incoming Redux state to this component that previously has been cached in it.

// imports Reselect selectors calculated value
import { ID, additionalInfo} from './selectors'

class Row extends Component {
  // component the responce for right render logic of the component based on Reselect values
  _progress = (ID, additionalInfo) => {
    const { statusEffects = [] } = additionalInfo
    const { timePercent: timeDisabled = 0 } = statusEffects[1] || {}
    const inactiveRows = rowID === 1 || rowID === 2
  
    const isDisabled = inactiveRows ? false : statusEffects[1] && statusEffects[1].disabled
    const isStatus = (statusEffects[1] && statusEffects[1].title) === 'Checkpoint'
  
  
    const progressOff = inactiveRows ? 0 : parseInt(timeDisabled.toFixed())
    const statusCheckpoint = isDisabled ? `${progressOff}%` : `${progressOff}%`
    const statusG = isDisabled ? `${progressOff}%` : `${progressOff}%`
    const status = isStatus ? statusCheckpoint : statusG
  
    return {
      isDisabled,
      progressOff,
      status
    }
  }

  render() {
    // calculated values inside own component method based on values from Reselect selectors
    const { isDisabled, progressOff, status } = this._progress(ID, additionalInfo)

    return ( 
      //...some view logic 
      {isDisabled + progressOff + status}
    )
  }
}

2.The second case, the component has a separated logic that response for the render of the render() method in selectors file. It has migrated in selectors file inside the Reselect createSelector wrapper. Where selectors calculates and cashes all data from Redux state and component logic func and throw on component only the final output values, directly in the render method of the component.

// createSelector logic with all component render logic
export const progress = createSelector([getId, getAdditionalInfo], (ID, additionalInfo) => {
  const { statusEffects = [] } = additionalInfo
  const { timePercent: timeDisabled = 0 } = statusEffects[1] || {}
  const inactiveRows = rowID === 1 || rowID === 2

  const isDisabled = inactiveRows ? false : statusEffects[1] && statusEffects[1].disabled
  const isStatus = (statusEffects[1] && statusEffects[1].title) === 'Checkpoint'


  const progressOff = inactiveRows ? 0 : parseInt(timeDisabled.toFixed())
  const statusCheckpoint = isDisabled ? `${progressOff}%` : `${progressOff}%`
  const statusG = isDisabled ? `${progressOff}%` : `${progressOff}%`
  const status = isStatus ? statusCheckpoint : statusG

  return {
    isDisabled,
    progressOff,
    status
  }
})

// component that gets calculated reselect values
class Row extends Component {
  render() {
    // recives the whole calculated values from Reselect selectors
    const { isDisabled, progressOff, status } = progress

    return ( 
      //...some view logic 
      {isDisabled + progressOff + status}
    )

And what I want to ask - if there are some performance differences of such two ways of Reselect usage? Which one is best on your think:

  1. Throw from Reselect on component only the calculated values from selectors that grabbed and cashed from Redux state

or

  1. Place all component render logic inside Reselect createSelector func and throw on the component only the final calculated values?

I'll be grateful you for any help!

Upvotes: 3

Views: 125

Answers (1)

Sviat Kuzhelev
Sviat Kuzhelev

Reputation: 1788

There is a both cases are right. Obviously, it's no unequivocal answer to this question. You should use reselect for each calculation that you can spot in the render method of a Component.

Also, you can improve Reselect memoization on you own, please see this FAQ from official page: https://github.com/reduxjs/reselect#q-the-default-memoization-function-is-no-good-can-i-use-a-different-one

I hope it will help you to understand what you want to do there.

Upvotes: 1

Related Questions