ReactJs UseEffect Dependency (Use case)

Usecase

Consider you have a checkbox, on the toggle of the checkbox you have to get the employee information from another method if the checkbox is checked.

Solution

To begin with, I created the following things.

Assume the below method will get called once the checkbox is checked.

function getActiveEmployeeInformation(): Employee {
  return {
    name: {
      firstName: "Sam",
      lastName: "El",
    },
  };
}

A Simple component to store the checkbox status and the employeeInfo.

function Employee() {
  const [status, updateStatus] = useState(false);
  const [employeeInfo, updateEmployeeInfo] = useState<Employee | null>(null);

  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={status}
          onChange={() => {
            updateStatus(!status);
          }}
        />
        Is Active
      </label>
      {status && (
        <p>
          {employeeInfo?.name.firstName} {employeeInfo?.name.lastName}
        </p>
      )}
    </>
  );
}

The obvious instinct will take us to write a method to be called on change of the checkbox and check the status there to call the getActiveEmployeeInformation method like below,

 function onStatusChange(){
    updateStatus(!status);
    if(status){
      const activeEmployeeInfo = getActiveEmployeeInformation();
      updateEmployeeInfo(activeEmployeeInfo);
    }
  }

this seems like a solution, but the problem is status may not be updated right after the updateStatus call, which might lead to an inconsistent result.

To solve the above use-case, we need a simple understanding of the useEffect, in a very simple term it can be explained that when there is a change in the dependent variable the associated callback(method) will be called.

for example, if you connect, methodA to a variable employee, if any action changes the employee, that change will trigger a change-event to call the associated callback which is methodA.

Here useEffect is the connector that connects the variable and its callback.

useEffect(()=>{},[dependentVariable])

on change of the dependent variable the anonymous method will be called, using this we can solve our use case by adding the following snippet in our Employee component.

 useEffect(() => {
    if (status) {
      const activeEmployeeInfo = getActiveEmployeeInformation();
      updateEmployeeInfo(activeEmployeeInfo);
    }
  }, [status]);

In the above snippet, we used the status as a dependent variable, on change of it the anonymous method will get the employee info if the status is true. Once I get the information I store it in a state variable for further access.

Solution

Hope you enjoyed reading this, Do let me know your feedback in the comments.

Thanks,
Sam El