From 5936fd80634d9c8666c5ffa80497ef8171e1df5c Mon Sep 17 00:00:00 2001
From: Oleksandr Karpovich <a.n.karpovich@gmail.com>
Date: Wed, 12 Oct 2022 11:01:32 +0200
Subject: [PATCH] Update compose-web examples and readme about effects (#2395)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
---
 .../kotlin/com/sample/content/CodeSnippets.kt | 11 ++++------
 .../src/jsMain/kotlin/ReactInComposeApp.kt    | 16 +++++++--------
 tutorials/Web/Using_Effects/README.md         | 20 +++++++++++++++++--
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
index 98ee83942c..74d2c7968e 100644
--- a/examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
+++ b/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 {  }
             }
         }
     }
diff --git a/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt b/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt
index f1d462b0e6..76c627b08f 100644
--- a/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt
+++ b/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)
         }
     }
-}
\ No newline at end of file
+}
diff --git a/tutorials/Web/Using_Effects/README.md b/tutorials/Web/Using_Effects/README.md
index 099bd8792d..1b5b16774a 100644
--- a/tutorials/Web/Using_Effects/README.md
+++ b/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.