Which life cycle method is preferred when using redux and react hooks? - reactjs

Question

In the edit page, by redux useSelector method data available to the component but it is not setting initial values. How to set it?
How to set the initial formData from the store?
In hook component rendering happens 4 times why?
import React,{useState} from 'react'
import { useSelector } from 'react-redux'
import {updateUserInfo} from '../actions/User'
const EditUser = (props) => {
const user = useSelector(state => state.user)
const [formData, setFormData] = useState({email: user.email ,fullName: user.fullName})
console.log(user)
const handleSubmit = e =>{
e.preventDefault();
const id = props.match.params.id
const data = new FormData()
data.append('email', formData.email)
data.append('fullName', formData.fullName)
data.append('image', formData.image)
props.dispatch(updateUserInfo(id,data,props.history))
// console.log(formData)
}
const handleChange = e =>{
setFormData({...formData, [e.target.name]: e.target.value })
}
const fileHandle = (e) =>{
// console.log(e.target.files)
setFormData({...formData,image: e.target.files[0]})
}
return (
<React.Fragment>
<h2>Edit Account</h2>
{Object.keys(user).length > 0 &&
<>
<form onSubmit={handleSubmit}>
<label htmlFor="fullName">Full Name</label>
<input type="text" name="fullName" value={formData.fullName} onChange={handleChange}/>
<br />
<label htmlFor="email">Email</label>
<input type="email" name="email" value={formData.email} onChange={handleChange}/>
<br />
<label htmlFor="image">Upload Image</label>
<input type="file" name="image" onChange={fileHandle}/>
<br />
<button >Update</button>
</form>
</>
}
</React.Fragment>
)
}
export default EditUser

Answer 1

useEffect(() => {
setFormData({email:props.user.email || "", fullName: props.user.fullName || ""}) // update the state if data else it is empty string, if not mentioned empty string you will warning uncontrolled component to controlled component vice-versa
},[props.user])
useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
When store value available to the component, props.user has properties and values then componentDidUpdate method works.
unnecessary rendering also prevented with useEffect method.