40

I am new to JavaScript. I see lot of places return and render being used just want to know what's the difference between them.

1
  • 2
    Your question is mostly about the JavaScript language. Please learn the language constructs.
    – nbkhope
    Mar 2, 2018 at 23:31

9 Answers 9

47

render method is required when you are writing a React component using as a class method

According to the docs:

The render() method is required.

When called, it should examine this.props and this.state and return one of the following types:

React elements. Typically created via JSX. An element can either be a representation of a native DOM component (<div />), or a user-defined composite component (<MyComponent />).

String and numbers. These are rendered as text nodes in the DOM.

Portals. Created with ReactDOM.createPortal. null. Renders nothing.

Booleans. Render nothing. (Mostly exists to support return test && pattern, where test is boolean.)

Essentially render is kind of a lifecycle method which is invoked whenever the component needs to update.

As for the return statement, its used to return the data/response/JSX elements depending on where it is used. If used in render method you need to return one of the above specified types(React elements, Strings and numbers, Portals or Booleans).

return from other function can either return the value evaluated from the function or return the React elements to be rendered in the render method

Functional components don't define a render method, instead they return the React elements using an explicit return statement or an implicit return

Eg: explicit return

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

Eg: Implicit return

const Welcome = (props) => (
     <h1>Hello, {props.name}</h1>;
)
2
  • 1
    Could you have both a render and return on the same react.js file? Or is it one or the other? Dec 29, 2021 at 20:39
  • 1
    @AdanVivero welcome to SO. Please read the answer thorough before commenting: If used in render method you need to return one of the above specified types(React elements, Strings and numbers, Portals or Booleans).
    – Timo
    Jan 12 at 21:26
34

In React prior to the newest version (v16), most React Components were class based. In a class based component, you call the render() method and then return the required JSX (html like javascript mix). With the update of React 16+, there is an increased use of functional components which do not have a render() method, instead returning the JSX directly. For example the syntax of a functional component may be like this:

const NewComponent = (props) => {
   return (
           <div>
               <h1>Title</h1>
           </div>
    )
}

alternatively, you can implicitly return JSX in a functional component without the return statement like this:

const NewComponent = (props) => (
   <div>
       <h1>Title</h1>
   </div>
)

Both of these will show the same as a class based component like this:

class NewComponent extends React.Component {
    render() {
        return (
            <div>
               <h1>Title</h1>
            </div>
        )
    }
}

You can read more at https://reactjs.org/docs/components-and-props.html

2
  • 1
    Thanks - this seems to be the most comprehensive, up to date explanation here at the moment.
    – niallobr
    Jan 14, 2020 at 13:34
  • 1
    Is it more wiser than to just use the render rather than the return? It doesn't seem that the return really have much purpose rather than just for basic displaying purposes. Dec 29, 2021 at 20:45
7

Render is what is actually being called in the component, return is what is "rendered". You can log, set variables, conditional rendering etc in the render, but return is what is actually output

render() {
console.log("Test")
const test = "test"
  return(
    <h1>Hi</h1>
  )
}
2
  • i like this answer since it also describes the limitations of return , i.e. in return everything js must be in curly braces
    – A.R.B
    Sep 29, 2020 at 2:35
  • 1
    @A.R.B No, return has no limitations. You always have to separate Code from html.
    – Timo
    Jan 12 at 21:35
4

return and render are different. render is a method of react. return is just pure javascript for returning output. nothing complicated.

2

In react, render is a method that tell react what to display. return in a method or function is the output of the method or function.

1

render() is like the warm-up and planning phrase before the ball game starts. Everyone knows what's gonna happen and then return is the player on the field that actually does what the render () says should happen.

1

Render is a method that tell react what to display.

Return is a method / give output of function

1
  • Could you provide some examples? Dec 29, 2021 at 20:47
1

"The render method returns a description of what the DOM should look like, and then React efficiently updates the real DOM to match."

For the best example to know the difference, do check out this link: https://quickleft.com/blog/understanding-the-difference-between-react-elements-and-components/

-1

Render is that what exactly you want to trigger multiple times.

Return is that which u want to Display.

For example.

render(){

let cardDisplay=some random text which u want to trigger multiple times. (Example, Displaying the names of employees in a company)}

return

( {cardDisplay} )

Explanation: You want to Display the list of employees in a company.so return the variable which you want to trigger(repeat)multiple times. Inside Render write what your logic for what to repeat.

4
  • give some proper example
    – bajran
    Jan 16, 2020 at 10:22
  • Also, add references to the documentation to co-relate what you are saying. Jan 16, 2020 at 10:55
  • It was a just a simple example. no references are available. Jan 17, 2020 at 9:36
  • Could you use the render and return on the same file you are working on? Dec 29, 2021 at 20:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.