From f2fe2f3aa469032a98d3ba7780cb54163dfcf06b Mon Sep 17 00:00:00 2001
From: Alex Panov <panovalexsey@gmail.com>
Date: Fri, 8 Nov 2024 22:44:44 +0500
Subject: [PATCH] Changed docs about ChildPanels

---
 docs/extensions/compose.md | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/docs/extensions/compose.md b/docs/extensions/compose.md
index 2db59bfe..efe960ba 100644
--- a/docs/extensions/compose.md
+++ b/docs/extensions/compose.md
@@ -298,22 +298,24 @@ You can use window size classes from the `material3-window-size-class` package t
 
 ```kotlin title="WindowSizeClass example"
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass.Companion.Expanded
 import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
+import com.arkivanov.decompose.router.panels.ChildPanelsMode
+import com.arkivanov.decompose.router.panels.ChildPanelsMode.SINGLE
+import com.arkivanov.decompose.router.panels.ChildPanelsMode.DUAL
 
 @Composable
-fun calculatePanelsMode(): ChildPanelsMode {
+fun ChildPanelsModeChangedEffect(onModeChanged: (ChildPanelsMode) -> Unit) {
     val windowSize = calculateWindowSizeClass()
-    return if (windowSize.widthSizeClass < WindowWidthSizeClass.Expanded) {
-        ChildPanelsMode.SINGLE
-    } else {
-        ChildPanelsMode.DUAL
+    val mode = if (windowSize.widthSizeClass < Expanded) SINGLE else DUAL
+
+    DisposableEffect(mode) {
+        onModeChanged(mode)
+        onDispose {}
     }
 }
 ```
 
-!!!warning
-    Function calculateWindowSizeClass will cause recomposition on every window size change. Try to reduce the recomposition scope.
-
 ```kotlin title="Basic example"
 import androidx.compose.runtime.Composable
 import com.arkivanov.decompose.extensions.compose.experimental.panels.ChildPanels
@@ -321,11 +323,7 @@ import com.arkivanov.decompose.router.panels.ChildPanelsMode
 
 @Composable
 fun PanelsContent(component: PanelsComponent) {
-    val mode = calculatePanelsMode()
-    DisposableEffect(mode) {
-        component.setMode(mode)
-        onDispose { }
-    }
+    ChildPanelsModeChangedEffect(component::setMode)
 
     ChildPanels(
         panels = component.panels,
@@ -358,11 +356,7 @@ import com.arkivanov.decompose.router.panels.ChildPanelsMode
 
 @Composable
 fun PanelsContent(component: PanelsComponent) {
-    val mode = calculatePanelsMode()
-    DisposableEffect(mode) {
-        component.setMode(mode)
-        onDispose { }
-    }
+    ChildPanelsModeChangedEffect(component::setMode)
 
     ChildPanels(
         panels = component.panels,