UseEffect initial state loading

Question

Can somebody explain why does console.log(foodList) return empty array instead of filtered array? I am making pagination logic, and I need to filter array first and then display it. However, this is like side effect and should only be done once because there are some other things which will trigger component re-executing so this has to be in useEffect. Dummy code is just data above this function and you dont have to bother with it.

Function 1

    const correctFunction = () => {
      const pages = Math.ceil(DUMMY_FOOD.length / 5);
    
      const arr = [];
      let helpArr = [];
    
      let c = 0;
    
      for (let i = 0; i < pages; i++) {
        for (let j = c; j < c + 5; j++) {
          helpArr.push(DUMMY_FOOD[j]);
        }
        c += 5;
        arr.push(helpArr);
        helpArr = [];
      }
    
      DUMMY_FOOD = arr;
      return DUMMY_FOOD;
    };

Component

const MenuList = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();
  const [page, setPage] = useState(2);
  let foodList = [];

  console.log(DUMMY_FOOD);
  useEffect(() => {
    foodList = correctFunction();
  }, []);

  console.log(foodList);
  ect...

Quentin · Accepted Answer · 2022-06-01 14:51:23Z

1

Effect hooks are run after the render function is complete. If you want to render the result of an effect, use a state. Set it inside the effect to trigger a re-render.

If you want to do an expensive operation once, then use useMemo instead.

const foodList = useMemo(correctFunction, []);

answered Jun 1, 2022 at 14:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

UseEffect initial state loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related