useEffect removes state and then resets? React

Question

I have a component made with React Select. The options passed into the options prop on the Select depends upon state that users entered previously. Every time the component renders there are checks to see if selectOptions already includes items from the state array

      <Select
        styles={err === '' ? inputStyles : inputStylesErr}
        className="basic-single"
        classNamePrefix="select"
        isClearable={true}
        isSearchable={true}
        isMulti={true}
        placeholder={`Select or search health zones in ${province}, ${state.address.country}`}
        options={selectOptions}
        defaultValue={selectOptions.some((option) => option.value === state.healthZonesServed[0]) ? (
          state.healthZonesServed.map((zone) => {
            return { ['label']: zone, ['value']: zone }
          })
        ) : ''}
        onChange={(values) => handleAddHealthZones(values.map((value) => value.value))}
      />

  const handleAddHealthZones = (value) => {
    setState({
      ...state,
      healthZonesServed: value
    })
  }

If a user populated their healthZonesServed array and then goes back and changes their province (the piece of state which controls the selectOptions) and then goes back to this component I need the healthZonesServed array to be reset to []

I do this in a useEffect. I can see in my console.log the healthZonesServed resets to an empty array on page load then somehow re-populates its previous values from somewhere. Would anyone have any insight as to why this is happening and a possible solution?

  useEffect(() => {
    if (selectOptions.some((option) => option.value === state.healthZonesServed[0])) {
      return
    } else {
      setState({
        ...state,
        healthZonesServed: []
      })
      console.log('HIT')
    }
  }, [])

Answer 1

The most probable reason, why this is not working is because you are using setState in a functional component. Try using the useState hook for the purpose of managing the state, in your case, setting the heathZoneServed array to empty array.

const [healthZoneServed,sethealthZoneServed] = useState([]);
sethealthZoneServed(value);

useEffect(() => {
    if (selectOptions.some((option) => option.value === state.healthZonesServed[0])) {
      return;
    } else {
      sethealthZonesServed([]);
      console.log('HIT');
    }
  }, [healthZonesServed]);

Hope this was helpful.