Avoid rerender in React caused by objects literal : how to do with variables in the object?

Question

I read in this article React is Slow, React is Fast: Optimizing React Apps in Practice that :

In fact, each time you pass an object literal as prop to a child component, you break purity.

Alright, I got it. So the best to avoid that is to create a variable with the object, and insert this variable in the prop, like that :

import React from 'react';

const style = { marginTop: 10 };
const AnyComponent = (props) => (
    <div style={style}>
        ...
    </div>
)

But what if the style prop depend on a received prop ? Where should be the object ? So for instance, I have this component:

import React from 'react';

const AnyComponent = (props) => (
    <div style={{ marginTop: props.marginTop }}>
        ...
    </div>
)

Is it a good practice to do:

import React from 'react';

const style = (marginTop) => ({ marginTop })
const AnyComponent = (props) => (
    <div style={style(props.marginTop)}>
        ...
    </div>
)

[EDIT] I forgot to say that most of my components have state, so in that case, is it a good idea to do :

import React from 'react';

class App extends React.Component {

  style = () => ({
    marginTop: this.props.marginTop
  })

  render() {
    return(
      <div style={this.style()}>

      </div>
     )
  }
}

Answer 1

Previously you couldn't do this in functional components (although you could use memoization) But now by the favor of React hooks, you can do something like this:

const AnyComponent = (props) => {
    const style = useMemo(() => ({ marginTop: props.marginTop }), [props.marginTop]);
    <div style={style}>
        ...
    </div>
}

And no, you can't use this one:

import React from 'react';

const style = (marginTop) => ({ marginTop })
const AnyComponent = (props) => (
    <div style={style(props.marginTop)}>
        ...
    </div>
)

Because it also creates a new object on every re-render of AnyComponent by calling the style function each time.

Answer 2

You could create your variable in your component, as follow:

import React from 'react';

const AnyComponent = (props) => {
 // if props.marginTop is an object
 const style = props.marginTop;

 return (
    <div style={style}>
        ...
    </div>
)};