لا تستجيب المكونات مع setTimeout في React Native

إذا كنت تريد تغيير الحالة عند بدء الصفحة بعد ٣ ثواني يمكنك عملها في ال componentDidMount وليس ال render أي عند البدء 
 

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

function Feed() {
	return <Text>مرحباً</Text>;
}

function Loading() {
	return <Text>جاري التحميل</Text>;
}

class App extends React.Component {
	constructor() {
		super();

		this.state = {
			ready: false
		};
	}

	componentDidMount() {
		setTimeout(function () {
			this.setState({ ready: true });
		}, 3000);
	}

	render() {


		return (
			<View>
				{
					this.state.ready ? <Feed /> : <Loading />
				}
			</View>
		);
	}
}

export default App;

هذا خطأ قاتل أن تستخدم ال setTimeout داخل ال render لماذا؟ 

دعنا نحلل الكود بشكل بسيط 

في اول عملية render للكود سوف تسير الامور بالشكل المتوقع وبعد ثلاث ثوان سوف يتم بالفعل تغير قيمة ال ready في ال State ومن ثم ....؟ 

هنا تكمن المشكله بعد أي عملية تعديل على ال state يتم تنفيذ render مرة أخرى ولكن في هذه المره سوف تكون قيمة ready بالفعل هي true وستتكرر العمليه وسيظهر لك الخطأ في الكونسول وبعد فتره سوف يقف المتصفح الخاص بك عن العمل لانك ادخلته في حلقة لانهائيه من تنفيذ ال render. 

وبالتالي ف الحل ان تستخدم  ال setTimeout داخل ال componentDidMount
 

componentDidMount() {
		setTimeout(function () {
			this.setState({ ready: true });
		}, 3000);
	}

وهنا تكمل فائدة componentDidMount حيث سيتم تنفيذ الكود بداخلها مرة واحده فقط بعد تمام عملية ال render للمرة الاولى 

فإذا ماحللنا الكود بعد التعديل 

في المرة الاولى سوف تسير الامور بالشكل المتوقع وبعد ثلاث ثوان سوف يتم تغير قيمة ال ready داخل ال State وبالتالي يتم تنفيذ عملية ال render مرة أخرى وتظهر أيضا النتيجه المتوقعه  ومن ثم لايحدث شئ ولا يتم تنفيذ ال setTimeout مرة أخرى

من حسن حضك أنك استعملت setTiemout والا لكان تجمد المتصفح الخاص بك ولن يمكنك حتى اغلاقه وهذا لأنك أدخلت المكون في infinit loop يمكنك أن تفكر فيها هكذا 

1. يشتغل المكون
2. تعين القيمة الأولية لل state وهي ready:false
3. يغير ال state
4. يعاد تشغيل المكون

وهكذا تبقى دائرة لا تنتهي والحل هو استخدام componentDidMount أو يمكنك الانتقال لاستخدام hooks

function Feed() {
  return <Text>مرحباً</Text>;
}

function Loading() {
  return <Text>جاري التحميل</Text>;
}

export default function App() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    setTimeout(function () {
      setReady(true);
    }, 3000);
  }, []);

 return (
			<View>
				{
					this.state.ready ? <Feed /> : <Loading />
				}
			</View>
		);
}