{"id":76943,"date":"2025-12-08T12:37:13","date_gmt":"2025-12-08T07:07:13","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=76943"},"modified":"2025-12-26T10:09:59","modified_gmt":"2025-12-26T04:39:59","slug":"conditional-rendering-in-react-19-activity-component","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/conditional-rendering-in-react-19-activity-component\/","title":{"rendered":"Activity Component: Conditional Rendering in React 19."},"content":{"rendered":"

Introduction<\/h2>\n

Traditionally, we used ternary operators or CSS style attributes (display and visibility) to implement conditional rendering in a React component, but the issue with this approach was that either it caused internal state loss or was not performance-friendly. With React 19, a new component called Activity<\/strong> has been introduced which can implement conditional rendering while preserving and pausing<\/strong> the internal state of the component. Previously it was used to handle by either of the two approaches –<\/p>\n

    \n
  1. Ternary operators (?, && )<\/strong><\/li>\n<\/ol>\n
    \"Ternary

    Ternary operators to conditionally render components<\/p><\/div>\n

    With ternary operators, the approach was clean and simple for dual component logic, but became messy if multiple components had to be switched. Also, the major drawback had been internal<\/strong> State Loss<\/strong><\/p>\n

    2. CSS property<\/strong><\/p>\n

    \"CSS

    Conditionally rendering via CSS style properties<\/p><\/div>\n

    With CSS properties like display or visibility, it preserves state, but since the component is never truly paused, it might prove expensive to implement it for large component switching.<\/p>\n

    Activity Component Implementation and states<\/h2>\n

    The Activity component solves both of these issues and provides a middle ground for implementing a performance-friendly conditional rendering approach. Using the Activity component is pretty simple; we just need to import it, and it uses a prop called “mode”<\/strong> which controls the visibility of the child content. It has two valid values \u2014 visible and hidden.<\/strong><\/p>\n

    \"Parent

    Parent component with Activity Wrapper<\/p><\/div>\n

     <\/p>\n

    Visible value –<\/h3>\n
    \"Showing

    Showing child with prop value – visible<\/p><\/div>\n

     <\/p>\n

      \n
    • is shown on the screen<\/li>\n
    • keeps its state<\/li>\n
    • effects (useEffect) run as normal<\/li>\n
    • DOM is present<\/li>\n<\/ul>\n

      Hidden value –<\/h3>\n

      Hiding Child component with prop passed as hidden in Activity wrapper<\/p><\/div>\n

       <\/p>\n

        \n
      • becomes invisible (display: none)<\/li>\n
      • state is preserved (does NOT reset!)<\/li>\n
      • effects are paused \u2014 React runs cleanup<\/li>\n
      • on becoming visible again, effects re-run with the old state<\/li>\n
      • DOM is temporarily removed from layout (not destroyed)<\/li>\n<\/ul>\n

         <\/p>\n

        \"Restoring

        Restoring Child component with prop visible. The count state is still preserved<\/p><\/div>\n

        Even when the child component is hidden and brought back, we can see that the internal state of the component is persisted.<\/p>\n

        When to use what –\u00a0<\/strong><\/p>\n\n\n\n\n\n\n\n
        Feature\u00a0<\/strong><\/td>\nTernary<\/strong><\/td>\nCSS<\/strong><\/td>\nActivity<\/strong><\/td>\n<\/tr>\n
        Unmounts<\/strong><\/td>\nYes<\/span><\/td>\nNo<\/span><\/td>\nNo<\/span><\/td>\n<\/tr>\n
        State Preserved<\/strong><\/td>\nNo<\/span><\/td>\nYes<\/span><\/td>\nYes<\/span><\/td>\n<\/tr>\n
        Effects Paused<\/strong><\/td>\nNo<\/span><\/td>\nNo<\/span><\/td>\nYes<\/span><\/td>\n<\/tr>\n
        Performance Friendly<\/strong><\/td>\nYes<\/span><\/td>\nNo<\/span><\/td>\nYes<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        <\/h2>\n

        Conclusion<\/h2>\n

        Activity Component is a great way to implement features like multiple tabs, side panels, wizards, and much more with reduced lines of code that we can usually implement with traditional conditional rendering, and it improves performance since React effects are paused. Although it doesn\u2019t completely replace traditional conditional rendering, as certain scenarios require effects to rerun or transitions to be handled, it is a strong addition in React 19 for cases where preserving internal state with minimal code is essential.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Introduction Traditionally, we used ternary operators or CSS style attributes (display and visibility) to implement conditional rendering in a React component, but the issue with this approach was that either it caused internal state loss or was not performance-friendly. With React 19, a new component called Activity has been introduced which can implement conditional rendering […]<\/p>\n","protected":false},"author":1581,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":56},"categories":[5876],"tags":[8252,1308,477,4064],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76943"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=76943"}],"version-history":[{"count":13,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76943\/revisions"}],"predecessor-version":[{"id":77165,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76943\/revisions\/77165"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=76943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=76943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=76943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}