DEV Community

박준희
박준희

Posted on • Originally published at aicoreutility.com

How to Hide Unnecessary UI Tabs in the Frontend

#react #ui #frontend

In my Image Studio app, there was a prominent "Portrait Preservation Edit" tab. Turns out, it was a feature I either wasn't using or wouldn't be using soon. Such unnecessary UI elements just clutter the experience and confuse users. I wrestled with how to hide it, and finally, I cracked it.

Attempts and Pitfalls

My first thought was, "Can't I just block the rendering logic for that tab?" So, I modified the code to skip rendering if a certain condition wasn't met when the component mounted.

// App.js
import React, { useState, useEffect } from 'react';
import FeatureTab from './FeatureTab';

function App() {
  const [showEditTab, setShowEditTab] = useState(false);

  useEffect(() => {
    // In a real scenario, this would be determined by a backend API call, etc.
    const isFeatureEnabled = checkFeatureStatus('Portrait Preservation Edit');
    setShowEditTab(isFeatureEnabled);
  }, []);

  return (
    <div>
      {/* Other UI elements */}
      {showEditTab && <FeatureTab title="Portrait Preservation Edit" />}
      {/* Other UI elements */}
    </div>
  );
}

function checkFeatureStatus(featureName) {
  // Dummy logic: This should be determined dynamically in reality.
  // For example, it depends on current user permissions, service settings, etc.
  // Here, we'll hardcode it to false for testing to hide the tab.
  console.log(`Checking status for: ${featureName}`);
  return false; // Setting to false to test hiding the tab
}

export default App;
Enter fullscreen mode Exit fullscreen mode

But here's the kicker: no matter how much I set setShowEditTab(false), the tab refused to disappear. The console dutifully showed Checking status for: Portrait Preservation Edit, but the UI stubbornly displayed the tab. After three hours of debugging, I finally discovered the culprit: another component was directly controlling that tab.

The Cause

The problem was that besides managing the state and controlling rendering in App.js, another component was directly controlling the tab using the visibility property. It was like a parent saying "no," but the child defiantly saying "yes" anyway.

// SomeOtherComponent.js (The problematic component)
import React from 'react';

function SomeOtherComponent() {
  return (
    <div>
      {/* ... */}
      <div style={{ visibility: 'visible' }}> {/* <-- This was the issue! */}
        {/* Portrait Preservation Edit tab content */}
        <h1>Portrait Preservation Edit</h1>
        <p>This tab should always be visible.</p>
      </div>
      {/* ... */}
    </div>
  );
}

export default SomeOtherComponent;
Enter fullscreen mode Exit fullscreen mode

Even though App.js set the showEditTab state to false, the style={{ visibility: 'visible' }} in SomeOtherComponent.js was forcing it to be displayed.

The Solution

The simplest and most straightforward solution was to remove the visibility property from that tab in SomeOtherComponent.js and unify the rendering logic under the showEditTab state managed in App.js.

// App.js (After modification)
import React, { useState, useEffect } from 'react';
import FeatureTab from './FeatureTab';
import SomeOtherComponent from './SomeOtherComponent'; // Import SomeOtherComponent

function App() {
  const [showEditTab, setShowEditTab] = useState(false);

  useEffect(() => {
    // In a real scenario, this would be determined by a backend API call, etc.
    const isFeatureEnabled = checkFeatureStatus('Portrait Preservation Edit');
    setShowEditTab(isFeatureEnabled);
  }, []);

  return (
    <div>
      {/* Other UI elements */}
      {showEditTab && <FeatureTab title="Portrait Preservation Edit" />}
      {/* Remove the tab rendering logic from SomeOtherComponent */}
      <SomeOtherComponent />
      {/* Other UI elements */}
    </div>
  );
}

function checkFeatureStatus(featureName) {
  // Dummy logic: This should be determined dynamically in reality.
  console.log(`Checking status for: ${featureName}`);
  return false; // Setting to false to test hiding the tab
}

export default App;
Enter fullscreen mode Exit fullscreen mode 
// SomeOtherComponent.js (After modification)
import React from 'react';

function SomeOtherComponent() {
  return (
    <div>
      {/* ... */}
      {/* Removed the visibility: 'visible' property */}
      <div>
        {/* Portrait Preservation Edit tab content */}
        <h1>Portrait Preservation Edit</h1>
        <p>This tab is controlled by App.js.</p>
      </div>
      {/* ... */}
    </div>
  );
}

export default SomeOtherComponent;
Enter fullscreen mode Exit fullscreen mode

Now, if showEditTab in App.js is false, the "Portrait Preservation Edit" tab completely disappears from the UI.

Results

  • The "Portrait Preservation Edit" tab is no longer visible in the UI.
  • The rendering logic is unified in App.js, making it easier to manage.
  • User confusion has been reduced.

Takeaways — Avoiding the Same Pitfall

  • [ ] When controlling the visibility of a UI element, ensure it's not being controlled independently by multiple components.
  • [ ] State management logic should be handled consistently, preferably in parent components or through a centralized state management library.
  • [ ] During code reviews, meticulously check if CSS properties like visibility and display are unintentionally forcing UI elements to be visible.
  • [ ] Design the system so that feature activation/deactivation states are dynamically determined by backend APIs or clear configuration values.

💬 This is part of *Riel** — a full AI product I'm building solo, in public (failures and all). Read more build logs → · See the product →*

Top comments (0)