CODEWITHSUNDEEP
reactjsredux
Chandler Bing
Chandler Bing

Reputation: 479

Is it good practice for a react component to have returned value of null?

I've got a portal at the bottom of the screen just for informational purposes. It is displayed on a redux state and this component is at App level. Problem is with re-render of the entire parent component if this portal component changes its state. In my case, if someone closes the portal. Here's how I close the portal on a click.

dispatch({
  type: 'close-portal',
  payload: {
    portalState: { display: false },
  },
});

App component

const isPortalOpen = useSelector((state) => state.user.portalState.display);
<Switch>
    <Route path='/login' component={LoginPage} exact />
    <Route path='/error' component={PermissionErrorPage} exact />
</Switch>
{isPortalOpen && <InformativeMessage />}

Now If I am on the Login page and I close the portal, the entire page re-renders.

Alternative

I removed the conditional rendering from the App component and moved that into the portal component itself.

App component

<Switch>
    <Route path='/login' component={LoginPage} exact />
    <Route path='/error' component={PermissionErrorPage} exact />
</Switch>
<InformativeMessage />

Portal component

return (
  <>
    {isPortalOpen ? (
      <EuiPortal>
        <EuiBottomBar
          style={{
            backgroundColor: showUnsavedWarningPortal ? "red" : "",
            padding: "20px",
          }}
        >
          <EuiFlexItem
            style={{
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
            }}
          >
            <EuiFlexItem>
              <EuiButtonIcon
                onClick={closePortal}
                color="ghost"
                iconType="crossInACircleFilled"
              />
            </EuiFlexItem>
            <EuiFlexItem style={{ marginLeft: "10px" }}>
              <EuiText>{message}</EuiText>
            </EuiFlexItem>
          </EuiFlexItem>
        </EuiBottomBar>
      </EuiPortal>
    ) : null}
  </>
);

Doubt

Now this will return null if the portal is closed but this component isn't completely removed. If I open up the Dev tools and head over to the Components tab I can able to see the portal component. Of course, there's nothing inside but is it a good practice to have this component through out the entire app is running?

Upvotes: 1

Views: 2983

Answers (2)

Mechanic
Mechanic

Reputation: 5380

There is no problem in returning null; react official document uses null it in their examples as well. Also it is specified as valid node type in react; as you can see react's @types/react/index.d.ts type definitions file:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

enter image description here

Upvotes: 3

Bao Huynh
Bao Huynh

Reputation: 1054

I would say there is nothing wrong with it, and I have seen such technique being used a lot. Preferably, I like first approach more - it puts the logic in the App component, and the InfoMessage only need to care about its presentation - it is a nice way to do a bit of separation of concern

Upvotes: 1

Related Questions