React functions inside render()

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.


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

        return <div />

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

Leave a Comment