What is the difference between render and return in reactjs?

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>;
)