In our component, we included everything in a single class, but that could prove not to be great for complex situations. In that case, we could opt to use classes and inheritance, as follows. To start with, create a basic something.base.js file, which will contain the base class that you will extend for handsets and tablets. In particular, your .render() method should be coded as in the following code snippet, in order to make the class behave as an abstract one that isn't meant to be used directly. You'll need to disable the ESLint react/require-render-return rule to make .render() not to return anything:

import React from "react";
import PropTypes from "prop-types";

// eslint-disable-next-line react/require-render-return
class SomethingBase extends React.PureComponent<{
    deviceData: deviceDataType
}> {
    static propTypes = {
        deviceData: PropTypes.object.isRequired
    };

    render() {
        throw new Error("MUST IMPLEMENT ABSTRACT render() METHOD");
    }
}

export { SomethingBase };

To continue, write separate something.handset.js and something.tablet.js files that extend SomethingBase to define the SomethingHandset and SomethingTablet components. And, to finish, set up the something.component.js file that will be used to check whether the device is a handset or a tablet, and return either a <SomethingHandset> component or a <SomethingTablet> one:

import { SomethingTablet } from "./something.tablet";
import { SomethingHandset } from "./something.handset";
import { getDeviceData } from "./device";

export const Something = getDeviceData().isTablet ? SomethingTablet : SomethingHandset;

With this style, you'd use and connect <Something> components in your code, which, internally, would really be the appropriate version for the current device's type.