diff --git a/docs/sdk/spa/react/_init-client.mdx b/docs/sdk/spa/react/_init-client.mdx index 9ae83aa0e0d..5082da920f0 100644 --- a/docs/sdk/spa/react/_init-client.mdx +++ b/docs/sdk/spa/react/_init-client.mdx @@ -21,7 +21,7 @@ const App = () => ( :::caution[`LogtoProvider` will implicity re-render contained component] -React has a powerful composition model. The `LogtoProvider` uses *containment* to reuse code between components. +React has a powerful composition model. The `LogtoProvider` uses _containment_ to reuse code between components. Some components don't know their children ahead of time. This is especially common for components like `LogtoProvider` that represent generic OAuth2 flows. Such components use the special `children` prop to pass children elements directly @@ -48,16 +48,16 @@ Anything inside the `` JSX tag gets passed into the `LogtoProvide By composition, the children takes advantage of [Inversion of Control](https://en.wikipedia.org/wiki/Inversion_of_control) by delegating the OAuth2 flows to logto library. The tricky part, however, is that the transparency of logto gets polluted into React business logics. For -example, the `` has a [side effect](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) of +example, the `` has a [side effect]() of ```tsx - useEffect(() => { - (async () => { - const isAuthenticated = await memorizedLogtoClient.logtoClient.isAuthenticated(); - setIsAuthenticated(isAuthenticated); - setLoadingCount((count) => Math.max(0, count - 1)); - })(); - }, [memorizedLogtoClient]); +useEffect(() => { + (async () => { + const isAuthenticated = await memorizedLogtoClient.logtoClient.isAuthenticated(); + setIsAuthenticated(isAuthenticated); + setLoadingCount((count) => Math.max(0, count - 1)); + })(); +}, [memorizedLogtoClient]); ``` Since the async operation invokes `setIsAuthenticated`, any client-side logic of