Update react samples

next/camera-snapshot/src/components/camera-snapshot.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import { useEffect, useRef, useState, CSSProperties } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, CSSProperties } from 'react';
 import {
   EventActions,
   defineComponents,
@@ -60,7 +60,7 @@ export default function CameraSnapshot() {
     }
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const elementRefCurrent = elementRef.current;
 
     if (!elementRefCurrent) return;

next/document-reader/src/components/document-reader.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import { useEffect, useRef, useState, CSSProperties } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState, CSSProperties } from 'react';
 import {
   EventActions,
   DocumentReaderDetailType,
@@ -80,7 +80,7 @@ export default function DocumentReader() {
     }
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const elementRefCurrent = elementRef.current;
 
     if (!elementRefCurrent) return;

react-ts/camera-snapshot/App.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useEffect, useRef, useState } from 'react';
+import { CSSProperties, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
   EventActions,
   defineComponents,
@@ -59,7 +59,7 @@ function App() {
     }
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const elementRefCurrent = elementRef.current;
 
     if (!elementRefCurrent) return;

react-ts/document-reader-device/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, CSSProperties } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect, CSSProperties } from 'react';
 import {
   EventActions,
   defineComponents,
@@ -59,7 +59,7 @@ function App() {
     }
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const elementRefCurrent = elementRef.current;
 
     if (!elementRefCurrent) return;

react-ts/document-reader/App.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useEffect, useRef, useState } from 'react';
+import { CSSProperties, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
   defineComponents,
   DocumentReaderService,
@@ -78,7 +78,7 @@ function App() {
     }
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const elementRefCurrent = elementRef.current;
 
     if (!elementRefCurrent) return;