مشكلة طباعة بعد تحديث React

react يستخدم strict mode  في بيئة التطوير و في ال strict mode يشتغل كل من التالي مرتين 

• مكونات الكلاس constructor,render,shouldComponentUpdate
• getDerivedStateFromProps (انت استخدمت هذه)
• جسد ال function component
• الدوال التي تحدث setState
• الدوال التي تعطى ل useState, useMemo,  useReducer

هذا ما يدعى بالـ Strict Mode في React. اذا قمت بالنظر الى شجرة المكونات، ستجد ان هناك مكون بالشكل التالي:

function ExampleApplication() {
	return (
		<React.StrictMode>
			<div>
				<SomeComponent />
			</div>
		</React.StrictMode>
	);
}

يساعد الـ Strict Mode في:

• تحديد المكونات ذات دورات الحياة غير الآمنة
• الكشف عن الآثار الجانبية غير المتوقعة
• الكشف عن API قديم مثل Context

الحل الأول هو ان تقوم بتعديل التطبيق بالتحديثات التي يتطلبها Strict Mode، او يمكنك حذفه واستخدام React.Fragment مكانه:

function ExampleApplication() {
	return (
		<React.Fragment>
			<div>
				<SomeComponent />
			</div>
		</React.Fragment>
	);
}

هذا التكرار يحدث بسبب Strict Mode وهو في الاصل وضع ليجنبك كثير من المشاكل او التعقيدات التي من الممكن تجنبها وهذه  تستطيع استخدام .react fragment كالتالي 

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

 يمكنك القراءة اكثر عن هذا الموضوع من docs الخاصة بالreact الموقع متوفر بالعربية ايضا https://reactjs.org/docs/strict-mode.html