Convert React Class Component to Functional Component

Question

I am very much new to React and below is the part of the code I want to convert to a functional component with useEffect hook. But I am not sure how to do this conversion.

Class Component

componentDidMount(){
this.setState({
patchVal:this.props.patchTaskVal,
startTime:this.props.patchStartTime,
setEndTime:this.props.patchEndTime
})
}

componentDidUpdate(prevProps){
if(prevProps.patchTaskVal!==this.props.patchTaskVal){
this.callValidation()
}
if(prevProps.closeTask!==this.props.closeTask){
this.setState({
showValue:false,
progressValue:[],
startTime:new Date(),
setEndTime:""
})
}
if(prevProps.patchStartTime!==this.props.patchStartTime || prevProps.endTime!==this.props.endTime && this.props.endTime!==""){
this.setState({
startTime:this.props.patchStartTime,
setEndTime:parseInt(this.props.endTime)
})
}
}

Could anyone please help me in converting this to useEffect hook? Thanks in advance!!

Answer 1

const [patchTaskVal, setPatchTaskVal]=useState(/*initial value */) 
const [startTime, setStartTime]=useState()
const [endTime, setEndTime] = useState()
useEffect( ()=>{
    setPatchTaskVal(props.patchTaskVal)
    ...//set other states
}, [])

useEffect( ()=> {
    callValidation() 
},[props.patchTaskVal])

useEffect( ()=>{
//setShowValue...
},[props.closeTask])

useEffect( ()=>{
    if(props.endTime!=""){
    // set states...
    }
},[props.patchStartTime,props.endTime]