What is the flow of control? - reactjs

Question

I am not understanding the flow of control since I am a newbie. In this code, after the component is rendered, useEffects get called. When the first useEffect is called, it is dispatching an action. So, after the action is dispatched, it should re-render the component because I am fetching the change in state from useSelector. Instead, it is executing the second useEffect. Similar is the case with the third useEffect, after it is triggered, it is changing the formData which is in useState. Instead of re-rendering, it is executing the 4th useEffect. Can anyone please help me understand the flow right from the start to the end?
import React,{useState,useEffect,useRef} from "react";
import AdminLayout from "../../../hoc/adminLayout";
import {useFormik,FieldArray,FormikProvider} from "formik";
import {useDispatch,useSelector} from "react-redux";
import {validation,formValues} from "./validationSchema";
import {getAdminArticle,updateArticle} from "../../../store/actions/articles_actions";
import {clearCurrentArticle} from "../../../store/actions/index";
import Loader from "../../../utils/loader";
import {
TextField,
Button,
Divider,
Chip,
Paper,
InputBase,
IconButton,
Select,
MenuItem,
FormControl,
FormHelperText
} from '#material-ui/core';
import AddIcon from '#material-ui/icons/Add';
import WYSIWYG from "../../../utils/forms/wysiwyg";
const EditArticle=(props)=>{
const dispatch=useDispatch();
const notifications=useSelector((state)=>{
return state.notifications;
})
const articles=useSelector((state)=>{
return state.articles;
})
const [isLoading, setIsLoading]=useState(true);
const [editorBlur,setEditorBlur]=useState(false);
const [formData,setFormData]=useState(formValues);
const actorsValue=useRef("");
/////edit/////
const [editContent,setEditContent]=useState(null);
////edit////
const formik=useFormik({
enableReinitialize:true,
initialValues:formData,
validationSchema:validation,
onSubmit:(values,{resetForm})=>{
//console.log(values);
setIsLoading(true);
dispatch(updateArticle(values,props.match.params.id));
}
});
const handleEditorState=(state)=>{
formik.setFieldValue("content",state,true);
}
const handleEditorBlur=(blur)=>{
setEditorBlur(true);
}
const errorHelper=(formik,value)=>{
return {
error:formik.errors[value] && formik.touched[value]? true:false,
helperText:formik.errors[value] && formik.touched[value]?formik.errors[value]:null
}
}
///////edit/////////
useEffect(()=>{
console.log("first");
dispatch(getAdminArticle(props.match.params.id));
},[dispatch,props.match.params])
/////edit///////
useEffect(()=>{
console.log("second");
// if(notifications && notifications.success){
// props.history.push("/dashboard/articles");
// }
// if(notifications && notifications.error){
setIsLoading(false);
// }
},[notifications,props.history])
useEffect(()=>{
console.log("third");
if(articles && articles.current){
setFormData(articles.current);
setEditContent(articles.current.content);
}
},[articles])
useEffect(()=>{
console.log("unmounted");
return ()=>{
dispatch(clearCurrentArticle());
}
},[dispatch])
return <AdminLayout section="Add Article">
{console.log("rendered")}
{isLoading?<Loader />:<form className="mt-3 article_form" onSubmit={formik.handleSubmit}>
<div className="form-group">
<TextField
style={{width:"100%"}}
name="title"
label="Enter a title"
variant="outlined"
{...formik.getFieldProps("title")}
{...errorHelper(formik,"title")}
/>
</div>
<div className="form-group">
<WYSIWYG setEditorState={(state)=>{
return handleEditorState(state)
}} setEditorBlur={(blur)=>{
return handleEditorBlur(blur)
}}
editContent={editContent}
/>
{formik.errors.content && editorBlur?
<FormHelperText error={true}>
{formik.errors.content}
</FormHelperText> :null}
<TextField
type="hidden"
name="content"
{...formik.getFieldProps("content")}
/>
</div>
<div className="form-group">
<TextField
style={{width:"100%"}}
name="excerpt"
label="Enter an excerpt"
variant="outlined"
{...formik.getFieldProps("excerpt")}
{...errorHelper(formik,"excerpt")}
multiline
rows={4}
/>
</div>
<Divider className="mt-3 mb-3" />
<h5>Movie Data and Score</h5>
<div className="form-group">
<TextField
style={{width:"100%"}}
name="score"
label="Enter an score"
variant="outlined"
{...formik.getFieldProps("score")}
{...errorHelper(formik,"score")}
/>
</div>
<FormikProvider value={formik}>
<h5>Add the Actors</h5>
<FieldArray name="actors"
render={
arrayhelpers=>(
<div>
<Paper className="actors_form">
<InputBase
className="input"
placeholder="Add actor name here"
inputRef={actorsValue}
/>
<IconButton onClick={()=>{
arrayhelpers.push(actorsValue.current.value);
actorsValue.current.value="";
}}>
<AddIcon />
</IconButton>
</Paper>
{formik.errors.actors && formik.touched.actors?
<FormHelperText error={true}>
{formik.errors.actors}
</FormHelperText> :null}
<div className="chip_container">
{formik.values.actors.map((actor,index)=>{
return <div key={actor}>
<Chip label={`${actor}`} color="primary" onDelete={()=>{
return arrayhelpers.remove(index);
}}>
</Chip>
</div>
})}
</div>
</div>
)
}
/>
</FormikProvider>
<div className="form-group">
<TextField
style={{width:"100%"}}
name="score"
label="Enter the Director"
variant="outlined"
{...formik.getFieldProps("director")}
{...errorHelper(formik,"director")}
/>
</div>
<FormControl variant="outlined" >
<h5>Select a Status</h5>
<Select
name="status"
{...formik.getFieldProps("status")}
error={formik.errors.status && formik.touched.status? true:false}
>
<MenuItem value=""><em>None</em></MenuItem>
<MenuItem value="draft">Draft</MenuItem>
<MenuItem value="public">Public</MenuItem>
</Select>
{formik.errors.status && formik.touched.status?
<FormHelperText error={true}>
{formik.errors.status}
</FormHelperText> :null}
</FormControl>
<Divider className="mt-3 mb-3" />
<Button variant="contained" color="primary" type="submit" >
Edit Article
</Button>
</form>
}
</AdminLayout>
}
export default EditArticle;
[enter image description here][1]