Latest React Features You Should Know

Mar 10, 2023 - 5 min read

example without the latest ref

ExampleWithoutLatestRef.tsx

const page = () => {
  const [selectedPetFood, setSelectedPetFood] = useState("food");
  const [selectedPet, setSelectedPet] = useState("dog");

  const handleClick = async () => {
    console.log(selectedPetFood, selectedPet, "before"); // {selectedPetFood: 'food', selectedPet: 'dog'}
    // changing the state of selectedPetFood to 'food1'
    await new Promise((resolve) => setTimeout(resolve, 3500));
    console.log(selectedPetFood, selectedPet, "after"); // {selectedPetFood: 'food', selectedPet: 'dog'}
  };
  return (
    <div className="w-96">
      <Input
        type="text"
        value={selectedPetFood}
        onChange={(e)=> setSelectedPetFood(e.target.value)}
      />
      <Input
        type="text"
        value={selectedPet}
        onChange={(e)=> setSelectedPet(e.target.value)}
      />
      <Button onClick={handleClick} disabled={!selectedPetFood || !selectedPet}>
        Submit
      </Button>
    </div>
  );
};

example with the latest ref

LatestReactFeatures.tsx

const page = () => {
  const [selectedPetFood, setSelectedPetFood] = useState("food");
  const [selectedPet, setSelectedPet] = useState("dog");
  const refSelectedPetFood = React.useRef(selectedPetFood);
  const refSelectedPet = React.useRef(selectedPet);

  React.useEffect(() => {
    refSelectedPetFood.current = selectedPetFood;
    refSelectedPet.current = selectedPet;
  }, [selectedPetFood, selectedPet]);
  const handleClick = async () => {
    console.log(refSelectedPetFood.current, refSelectedPet.current, "before"); // {selectedPetFood: 'food', selectedPet: 'dog'}
    // changing the state of selectedPetFood to 'food1'
    await new Promise((resolve) => setTimeout(resolve, 3500));
    console.log(refSelectedPetFood.current, refSelectedPet.current, "after");
  };
  return (
    <div className="w-96">
      <Input
        type="text"
        value={selectedPetFood}
        onChange={(e)=> setSelectedPetFood(e.target.value)}
      />
      <Input
        type="text"
        value={selectedPet}
        onChange={(e)=> setSelectedPet(e.target.value)}
      />
      <Button onClick={handleClick} disabled={!selectedPetFood || !selectedPet}>
        Submit
      </Button>
    </div>
  );
};