React组件返回Null是否为最佳实践？全局Portal组件持续挂载并在隐藏时返回Null的合理性探讨

1. Is returning null from a React component a best practice? #

Absolutely! Returning null is an officially supported and widely accepted pattern in React for indicating that a component should render no visible UI. It’s a clean way to handle conditional rendering within the component itself, rather than relying on parent components to conditionally mount/unmount it.

This approach keeps your component logic encapsulated—instead of the parent managing whether the component exists, the component decides for itself based on its own state or props (in your case, the Redux-derived isPortalOpen state).

2. Is keeping the Portal component mounted permanently (even when it returns null) a best practice? #

This depends on your use case, but for your scenario (a frequently toggled informational portal), it’s absolutely a good practice—here’s why:

• Avoids unnecessary mount/unmount overhead: Every time you mount a component, React has to initialize its state, set up event listeners, and create DOM nodes. Unmounting does the reverse. If your portal is toggled often (like users closing/reopening it), keeping it mounted eliminates this repeated overhead, which boosts performance.
• Prevents parent component re-renders: As you discovered earlier, moving the conditional logic inside the portal component means your App component no longer depends on the isPortalOpen state. So when the portal closes, only the portal component re-renders (to return null), instead of the entire App and its child routes (like LoginPage). That’s a huge win for performance, especially in larger apps.

Caveat to keep in mind #

If your portal component has heavy side effects (like long-running subscriptions, large state objects, or expensive calculations), you’ll want to pause those when isPortalOpen is false. For example, you can use useEffect to subscribe to data only when the portal is visible:

useEffect(() => {
  if (isPortalOpen) {
    // Set up subscription or heavy logic here
    const subscription = someService.subscribe();
    return () => subscription.unsubscribe();
  }
}, [isPortalOpen]);

But for a simple informational component like your InformativeMessage, there’s no need for this—keeping it mounted is totally safe and efficient.

Final Takeaway #

Your current implementation is a solid, performant approach. Returning null from a component is a standard React pattern, and keeping the portal mounted (instead of unmounting it when hidden) is the right choice for your use case, as it prevents unnecessary re-renders and overhead.

内容的提问来源于stack exchange，提问作者Chandler Bing