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.
9 Answers
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
andthis.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>;
)
-
1Could 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).
– TimoJan 12 at 21:26
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
-
1Thanks - this seems to be the most comprehensive, up to date explanation here at the moment.– niallobrJan 14, 2020 at 13:34
-
1Is 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
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>
)
}
return and render are different. render is a method of react. return is just pure javascript for returning output. nothing complicated.
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.
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.
Render is a method that tell react what to display.
Return is a method / give output of function
"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/
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.
-
-
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