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.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.