React useState does not update immediately

Question

I have a parent component name "CreateInvoice" and a child component name "InvoiceInnerForm". In the child component, I have a complex form.

Scenario is

For creating an invoice I have created an empty object which I am setting like

const [invoice, setInvoice] = useState<IInvoice>({ ...DeepCopy(DefaultInvoiceState)});

and it's working fine. For the update case, I am trying to set Invoice state in useEffect. In below code, I have created an object in useEffect method and trying to set state but it's not reflecting changes.

I am a beginner in react-hooks. Can anyone please guide me why it's not reflecting changes.

const CreateInvoice: React.FC<Props> = (props) => {
const [invoice, setInvoice] = useState<IInvoice>({ ...DeepCopy(DefaultInvoiceState)});

useEffect(() => {
   // only set for update case  
   const obj: IInvoice = {
       invoiceId: 1,
       invoiceCreatedDate: new Date(),
        salesMan: {
             id: "c94eb8c8-5b5d-4e36-a55e-9d1b7b2fc70c",
              name: "Shoaib Nazir",
        },
        customer: {
             id: 1,
             mobile: "03137864714",
             name: "Noor Baker",
             route: { id: 1, name: "Railway Road" },
        },
        product: { id: 0, name: "" },
        quantity: 0,
        discount: 0,
        bouns: 0,
        unitPrice: 0,
        discountInPercentage: 0,
        total: 0,
       items: [{
               bouns: 0,
               discount: 0,
               discountInPercentage: 0,
                product: { id: 1, name: "Pepsi" },
               quantity: 2,
               total: 240,
              unitPrice: 120,
        }],
       subTotal: 480,
       totalDiscount: 0,
       totalPayableAmount: 480,
       paidAmount: 0,
       unPaidAmount: 480,
    };
    setInvoice(obj);
   }, []);

 return (    
     <InvoiceInnerForm
        invoice={invoice}
      ></InvoiceInnerForm>
  );
};

export { CreateInvoice };

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Brian Thompson, Oct 28 '20 at 15:15
If you don't put anything in the dependency list useEffect will only ever run the first time. From https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect : "If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run." You can leave the second argument of useEffect blank for it to run every time, or supply it with some value(s) that would indicate that it should be re-run. — Ben Stephens, Oct 28 '20 at 15:17
@BenStephens, If I don't pass an empty array as the second argument in useEffect then it stuck in infinite rendering I just want, when component render then it once checks the condition either it is an update or not? If it is for the update then set invoice state and reflect changes on the form — Magi, Oct 29 '20 at 14:24
Why do you set the invoice in useEffect rather than in whatever process handles the update? — Ben Stephens, Oct 29 '20 at 16:20
in useEffect I am detecting is the call for creating an invoice or update? If it is for the update then I want to set invoice state and updated states will available in invoice form — Magi, Oct 30 '20 at 09:48

React useState does not update immediately

0 Answers0