Update compose-web examples and readme about effects (#2395)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt

@@ -1,9 +1,6 @@
 package com.sample.content
 
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.*
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.*
 import com.sample.HighlightJs
@@ -263,9 +260,9 @@ fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
                 backgroundColor(Color("transparent"))
             }
         }) {
-            @Suppress("DEPRECATION")
-            DomSideEffect(code) {
-                it.setHighlightedCode(code)
+            DisposableEffect(code) {
+                scopeElement.setHighlightedCode(code)
+                onDispose {  }
             }
         }
     }

examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt

@@ -1,7 +1,4 @@
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
 import org.jetbrains.compose.web.css.margin
 import org.jetbrains.compose.web.css.percent
 import org.jetbrains.compose.web.css.px
@@ -23,15 +20,16 @@ private fun ElementScope<HTMLElement>.UseReactEffect(
     key: Any?,
     content: RBuilder.() -> Unit
 ) {
-    DomSideEffect(key = key) { htmlElement ->
-        render(htmlElement) {
+    DisposableEffect(key) {
+        render(scopeElement) {
             content()
         }
+        onDispose {  }
     }
 
-    DisposableRefEffect { htmlElement ->
+    DisposableEffect(Unit) {
         onDispose {
-            unmountComponentAtNode(htmlElement)
+            unmountComponentAtNode(scopeElement)
         }
     }
 }
@@ -91,4 +89,4 @@ fun reactInComposeAppExample() {
             YoutubeReactPlayerWrapper(videoUrl)
         }
     }
-}
+}

tutorials/Web/Using_Effects/README.md

@@ -28,8 +28,18 @@ Only one `ref` can be used per element. Calling it more than once will dismiss e
 
 For example, `ref` can be used to add and remove some event listeners not provided by compose-web from the box.
 
-### DisposableRefEffect
+### DisposableRefEffect (deprecated)
 
+**Deprecated:** 
+
+Consider using `DisposableEffect`. Its scope provides `scopeElement` - a reference to the underlying HTML element:
+``` kotlin
+DisposableEffect(key) {
+    scopeElement.innerText = key
+    onDispose { scopeElement.innerText = "" }
+}
+```
+---
 Under the hood, `DisposableRefEffect` uses [DisposableEffect](https://developer.android.com/jetpack/compose/side-effects#disposableeffect)
 
 `DisposableRefEffect` is similar to `ref`, since it also provides a reference to an element. At the same time it has few differences.
@@ -65,8 +75,14 @@ Div {
 }
 ```
 
-### DomSideEffect
+### DomSideEffect (deprecated)
+
+**Deprecated:**
+
+Consider using [SideEffect](https://developer.android.com/jetpack/compose/side-effects#sideeffect-publish).
+If a reference to an underlying HTML element is needed, consider using `DisposableEffect` and `scopeElement` within its scope.
 
+---
 Under the hood, `DomSideEffect` uses [SideEffect](https://developer.android.com/jetpack/compose/side-effects#sideeffect-publish)
 
 `DomSideEffect` as well as `DisposableRefEffect` can be used with a key and without it.