I’ve read a ton of posts and articles, tried different approaches, inluding useContext, useReducer, etc. but i still can’t understand why state does not change and why the page is not rerendering?

const DataManipulation = ({ data }) => { const [taskData, setTaskData] = useState([]); const subItemMaker = (subItem, task) => { subItem.forEach((sub) => { preconditionCheck(sub) && setTaskData(addObjectToArray(taskData, task, sub)); }); }; useEffect(() => { console.log(taskData); //Printing the data here }, [taskData]); const makeUniqueProducts = (dataValues) => { dataValues.forEach((dataItem) => { subItemMaker(dataItem.subItemValues, dataItem.name); }); }; useEffect(() => […]

const DataManipulation = ({ data }) => { const [taskData, setTaskData] = useState([]); const subItemMaker = (subItem, task) => { subItem.forEach((sub) => { preconditionCheck(sub) && setTaskData(addObjectToArray(taskData, task, sub)); }); }; useEffect(() => { console.log(taskData); //Printing the data here }, [taskData]); const makeUniqueProducts = (dataValues) => { dataValues.forEach((dataItem) => { subItemMaker(dataItem.subItemValues, dataItem.name); }); }; useEffect(() => […]

const DataManipulation = ({ data }) => { const [taskData, setTaskData] = useState([]); const subItemMaker = (subItem, task) => { subItem.forEach((sub) => { preconditionCheck(sub) && setTaskData(addObjectToArray(taskData, task, sub)); }); }; useEffect(() => { console.log(taskData); //Printing the data here }, [taskData]); const makeUniqueProducts = (dataValues) => { dataValues.forEach((dataItem) => { subItemMaker(dataItem.subItemValues, dataItem.name); }); }; useEffect(() => […]

const DataManipulation = ({ data }) => { const [taskData, setTaskData] = useState([]); const subItemMaker = (subItem, task) => { subItem.forEach((sub) => { preconditionCheck(sub) && setTaskData(addObjectToArray(taskData, task, sub)); }); }; useEffect(() => { console.log(taskData); //Printing the data here }, [taskData]); const makeUniqueProducts = (dataValues) => { dataValues.forEach((dataItem) => { subItemMaker(dataItem.subItemValues, dataItem.name); }); }; useEffect(() => […]

const DataManipulation = ({ data }) => { const [taskData, setTaskData] = useState([]); const subItemMaker = (subItem, task) => { subItem.forEach((sub) => { preconditionCheck(sub) && setTaskData(addObjectToArray(taskData, task, sub)); }); }; useEffect(() => { console.log(taskData); //Printing the data here }, [taskData]); const makeUniqueProducts = (dataValues) => { dataValues.forEach((dataItem) => { subItemMaker(dataItem.subItemValues, dataItem.name); }); }; useEffect(() => […]

I have this program that should show all of my images and when I click a check box, filter them down to the specified attribute. However, it only seems to work once when I reload the page and then any time I click a checkbox the filter doesn’t update. I am new to react, am i using setState or handleChange wrong?

I have a React component that has functionality to query TV shows from an external API, add shows to be tracked and track them. In the component, I have many functions defined to handle input changes, form submissions, setting various state variables, etc.

I’m reading the book Advanced React: Deep dives, investigations, performance patterns and techniques. In the first chapter, which is an introduction to re-renders, I’m struggling to understand the following text: