I am new to ReactJs and am confused between where I should use render and where return to mount JSX to DOM

1st syntax only return

  return <button>Hello</button>;

2nd return syntax inside render

 render() { return ( <button> Hello </button> ); }

That is, in fact, both options do the same thing if I understand correctly, but when and where should I use which one? Can I use render without return ?

    1 answer 1

    It's not what you think. Let's start with the render() method - this is the required method, the rendering of the component. The code of this method must be clean, which means that it should not change the state of the component. The method should return the result that will be drawn by the browser. That is, if you do not return anything from it through return , then nothing will be displayed.

    The render() method is the only required method in a class component. When called, it should check this.props and this.state and return one of the following types:

    • React elements
    • Arrays and fragments
    • Portals
    • String and numbers
    • Booleans or null

    That is, he must necessarily vrenut something and this is something - must be one of the previous list. To study read:

    Now we go to return - this is just what will be returned from the function. In rendering, in the return value, it is customary to return one of the elements described above, which will be drawn by the browser. In the JSX files, you can return HTML markup as a result in other places, that is, there may be intermediate rendering functions returning parts of your component.

    Can I use render without return ? - and what washed away, if in this case nothing is drawn? The return terminates the execution of the current function and returns its value. Read this too: JavaScript return