React useEffect and onClick button do not work - reactjs

Question

App.js
import { Container, Row, Col } from "react-bootstrap";
import React, { useState, useEffect } from 'react';
import {person} from "./Data"
import DatesCounts from "./Components/DatesCounts";
import DatesList from "./Components/DatesList";
import DatesAction from "./Components/DatesAction";
function App() {
const [personData, setPersonData] = useState(person)
const onDelet =()=> {
setPersonData([])
}
const onViewData=() => {
setPersonData(person)
}
useEffect(()=>{
setPersonData([])
})
return (
<div className="color-body font">
<Container className="py-5">
<DatesCounts person={person} />
<DatesList person={person} />
<DatesAction deletData={onDelet} viewData={onViewData} />
</Container>
</div>
);
}
export default App;
DatesAction.js
import React from 'react';
import {Row,Col} from 'react-bootstrap';
const DatesAction = ({deletData , viewData}) => {
return (
<Row className=" justify-content-center my-2">
<Col sm="8" className="d-flex justify-content-between">
<button onClick={deletData} className="btn-style p-2">Clear All</button>
<button onClick={viewData} className="btn-style p-2">Show Data</button>
</Col>
</Row>
);
}
export default DatesAction;
I tried to execute useEffect to clear data in the beginning without success.
I also tried to execute onClick buttons Clear All and Show Data without success.
as you see the code is for Dates Reminder the componenets are working but the onClick buttons are not working also the useEffect doesn't work.

Answer 1

you need to send child components personData, instead of person. Since they are receiving the json instead of the useState information
<DatesCounts person={personData} />
<DatesList person={personData} />

Answer 2

To update the state try to use useEffect with dependency on your personData
useEffect(() => {}, [personData])
For setting the initial state, you can use use effect without dependency instead of setting it directly to useState.
useEffect(() => {
setPersonData(person);
}, [])

Answer 3

You don't need a hook especially when dealing with onclick events.
simply have a function which will reset the state and pass it as a prop to child component.
const initialState = { }; //definte initial state.
const [person, setPersons] = useState(initialState);
const resetState = () => {
setPersonState(initialState);
}
//render
<Child onReset={resetState} />

Answer 4

You are missing the dependency array in useEffect but anyway lets improve the performance of your code using React.memo and React.useCallback.
Wrap your function in a React.useCallback so that their reference will be same on next render and will improve some performance but to effectively use useCallback wrap the child component with React.memo
DatesAction.jsx
import React from "react";
import { Row, Col } from "react-bootstrap";
const DatesAction = React.memo(({ deletData, viewData }) => {
return (
<Row className=" justify-content-center my-2">
<Col sm="8" className="d-flex justify-content-between">
<button onClick={deletData} className="btn-style p-2">
Clear All
</button>
<button onClick={viewData} className="btn-style p-2">
Show Data
</button>
</Col>
</Row>
);
});
export default DatesAction;
App.jsx
import { Container, Row, Col } from "react-bootstrap";
import React, { useState, useEffect } from "react";
import { person } from "./Data";
import DatesCounts from "./Components/DatesCounts";
import DatesList from "./Components/DatesList";
import DatesAction from "./Components/DatesAction";
function App() {
const [personData, setPersonData] = useState(person);
const onDelet = React.useCallback(() => {
setPersonData([]);
}, [deps]);
const onViewData = React.useCallback(() => {
setPersonData(person);
}, [deps]);
useEffect(() => {
setPersonData([]);
}, [deps]);
return (
<div className="color-body font">
<Container className="py-5">
<DatesCounts person={person} />
<DatesList person={person} />
<DatesAction deletData={onDelet} viewData={onViewData} />
</Container>
</div>
);
}
export default App;