Is it bad to create functions in render?

Viewed 3614

Is putting functions in render like this a bad practice?

Are these functions created every render, leading to a performance hit? How big of a performance hit? Is there a link somewhere that measures this or a reliable source saying that this is bad?

Does this cause unnecessary renders in any way? I hear this is especially not a good idea for PureComponent.

Having trouble finding clarification whether this is okay or not.

class MyComponent extends Component {
  ...

  render() {
    const myFunc1 = () => {};
    const myFunc2 = () => {};
    const myFunc3 = () => {};
    const myFunc4 = doSomething(() => {});

    return (
      <div>hello world</div>
    );
  }
}
3 Answers
Related