Is it possible to use React without rendering HTML?

Question

I was wondering if it's possible to use React for doing logic and sending data back to a javascript function, without rendering any html. The component I'm thinking of is something that you pass some data to, and it'll send data back to a javascript function outside of react. I know that can be done, and I've done that part myself, but I'm not sure how you would do this without rendering html as it is required. Is this even a practical use case for react?

Answer 1

As of React >= 16.2 it is possible to use any of these versions:

render() {     return false;  }  render() {     return null;  }  render() {     return [];  }  render() {     return <React.Fragment></React.Fragment>;  }  render() {     return <></>;  } 

Returning undefined does not work.

---

The component I'm thinking of is something that you pass some data to, and it'll send data back to a javascript function outside of react.

Why would you want to create a component for that? Most of the time a regular js function in an existing component can be enough.

One usecase is for exemple to setup a side-effect when component is mounted and tear it down when it unmounts. For exemple if you have a ReactNative mobile app with portrait orientation, you could imagine a <Landscape/> component, that, when mounted, would allow temporarily to display the app in landscape orientation, and when unmounted, orientation would be reset to app default. You can surely manage this orientation change on an existing component, but creating a dedicated component might be more handy and reusable.

Note that React can also run on the server side so I guess it is possible to use it in such a way that it doesn't involve any DOM modifications (but maybe only the virtual DOM computation).