React functions inside render()

reactjs components
Whymess picture Whymess · Dec 28, 2016 · Viewed 29.3k times · Source

Is there a preference on where you put functions inside a react component. I am still learning react so just trying to figure out the best practices. 

class Content extends React.Component {
    /// Whats the difference between putting functions here such as 
   Hello(){

   }

  render(){
      /// or here
   Hello(){

   }


    return()(
      <div>blah blah </div>

    )

    }


  }

Answer

Martin Dawson picture Martin Dawson · Dec 28, 2016

A function in the render method will be created each render which is a slight performance hit. It's also messy if you put them in the render, which is a much bigger reason, you shouldn't have to scroll through code in render to see the html output. Always put them on the class instead.

For stateless components, it's probably best to keep functions outside of the main function and pass in props instead, otherwise the function will be created each render too. I haven't tested performance so I don't know if this is a micro-optimization but it's worth noting.

Example:

const MyStatelessComponent = ({randomProp}) => (
    render() {
        doSomething(randomProp);

        return <div />
    }
);

doSomething = (randomProp) => {
    //Do something here
}

Related questions

React component initialize state from props

In React, are there any real differences between these two implementations? Some friends tell me that the FirstComponent is the pattern, but I don't see why. The SecondComponent seems simpler because the render is called only once. First: import React, { …

Read More
How to map an array of objects in React

I have an array of objects. I would like to map this array of objects. I know how to map an array, but can't figure out how to map an array of objects. Here is what I have done so …

Read More
Checking for Undefined In React

I have a scenario where I'm passing data from a reducer into my react state. data: { "id": 1, "title": "Test", "content": { "body": "sdfsdf" "image": "http://example.com" } } Using componentWillRecieveProps, this works perfectly for retrieving the title. componentWillReceiveProps(nextProps) { this.setState({ title: …

Read More