CODEWITHSUNDEEP
reactjsoptimization
lanetrotro
lanetrotro

Reputation: 357

optimized var processing in react components classes in render function

I'm facing a situation where my react components are done like this

export default class MyComponent extends React.Component {


 render() {
    const { var } = this.props
    const newVar = processVar(var)
    return(newVar)
    }
}

I know that this props received is never going to change. Is it a probleme if i do this like that, or should I process it in componentDidMount then setting it in the component's state ? In the case i'm not receiving this var from the props but from my store (i'm using mobx) should i use computed to acheive this ?)

The question is more like what is the most optimized way to do that(should i process it in the componentDidMount or let it in the render) or is the possible gain so small i should neglect it ?

Upvotes: 0

Views: 30

Answers (1)

Aymeric Henry
Aymeric Henry

Reputation: 51

When you are using the destructuration, you have a pointer on the object/string/etc. So you don't create a new reference everytime you destructuring, therefore the comparisons test will not trigger. There is no performance issue with this mostly method, it's even recommended to improve code clarity.

/ Edit / Sorry i misunderstood your problems, your function Process() does return the object with a new reference, but it doesn't matter as you are using a component so the rerendre method will be triggered on a change of props or state.

For your the readability I never used mobx but if you use an HOC to fetch the props you can also direct send the Process(var) in the HOC

Upvotes: 1

Related Questions