How to control useState and fill with data on load ? useEffect no work

Question

I need to control useEffect and useState.

I need to change useState inside useEffect or some other hooks?

I have prop value:

const componnet = ({value}) => {

const [selected, setSelected] = useState([]);

  useEffect(() => {
    dispatch(getData());
  }, [dispatch]);

  useEffect(() => {
    let fletedArr = flatDataTree(tree);
    const result = intersectionBy(fletedArr, value, "id");
    
    setSelected(result); // I try to set Selected but no work

    console.log("result", result); empty state
  }, []);
}

What I am try just to add selected in [selected] example ->

  useEffect(() => {
    let fletedArr = flatDataTree(tree);
    const result = intersectionBy(fletedArr, value, "id");
    
    setSelected(result); // I try to set Selected but no work

    console.log("result", result); empty state
  }, [selected]);

when i look at the console i see non stop data console.log and my whole system crashes in a few seconds after. I need after that to close tab.

I need any hack to fill setSelected with data on load page?

const [selected, setSelected] = useState([value]); 

this is no solution because i need to filter value and add some properties...

Answer 1

The parameter of useState is for initial state. Put your initial state there.

const componnet = ({value}) => {

const [selected, setSelected] = useState( intersectionBy(flatDataTree(tree), value, "id"));

  useEffect(() => {
    dispatch(getData());
  }, [dispatch]);
// ...
}