Should I pass useSelector to useState

Question

Hello guys I have question regarding which method you prefer:

In a React functional component with TypeScript, that gets values from Redux State using useSelector is: 1)

 const campaign = useSelector(campaignSelector);
 const [audienceSample, setAudienceSample] = useState<number | null>((campaign || 
  {max_completes_total: null})['max_completes_total']);

from 2)

 const campaign = useSelector(campaignSelector);
  const [audienceSample, setAudienceSample] = useState<number | null>(null);
  useEffect(() => {
    setAudienceSample(campaign.max_completes_total)
     },[campaign])

I know 1 is less code but do you think it is faster and which one would you prefer thank you guys

Answer 1

The first is invalid. And it is invalid because state from useState is persistent, and the argument which is set in useState is default value, what it means is - it will be set only when component mounts for the first time. So changing of the redux state and new value given from useSelector will not effect the local state, it will indicate all the time the original default value.

Answering your question - the answer is not about what I prefer, but what works, the second is just the proper one. However what I would propose here as the best solution from the code perspective is to merge little bit both, in order to avoid setting null as default and setting generic types in useState. Consider following code:

const campaign = useSelector(campaignSelector);
const [audienceSample, setAudienceSample] = useState(campaign?.max_completes_total); // set campaign as default

useEffect(() => {
   setAudienceSample(campaign?.max_completes_total)
},[campaign]) // set the relation between redux campaign and local state

Additionally as you see I have used optional chaining in order to simplify the code. The type of the local state will automatically be inferred as number | undefined.

Above all as I understood your case is to have a relation between redux and local state, then the second is the only option. If your intention was to set only the default value, then using useEffect is not needed at all.