SolaraViz: move hooks before early return in ComponentsView

[EwoutH]

Summary

Fixes Solara hooks validation warning in ComponentsView by moving all hook calls before the early return statement.

Problem

The component was calling solara.use_state() after a conditional early return, violating React's Rules of Hooks which require hooks to be called in the same order on every render.

Changes

• Moved solara.use_state(0) and solara.use_state({}) calls to the top of ComponentsView
• Ensures hooks are always called before any conditional logic

[EwoutH]

@Sahil-Chhoker, can you help out with this?

The warning seems to originate from ComponentsView, which has a use_effect hook called after an early return (line 419, after return on line 380). This violates React's Rules of Hooks - the hook is only called when components is not empty, causing inconsistent hook counts between renders.

A potential fix could be to move use_effect before the early return and handle the empty case inside the effect callback:

@solara.component
def ComponentsView(components, model):
    current_tab_index, set_current_tab_index = solara.use_state(0)
    layouts, set_layouts = solara.use_state({})
    
    def sync_layouts():
        if not components:
            return
        # ... build pages and sync logic here ...
    
    solara.use_effect(sync_layouts, [len(components)] if components else [])
    
    if not components:  # Now safe to return early
        return
    
    # ... rest of component ...

This would make sure all hooks are called in the same order on every render.

Does this have any negative effects? The early return was meant for something I can imagine.