Why does Metronic NOT RESPECT React Documentation?
React Docs SPECIFICALLY state not to read from a "useRef" during rendering
<a>https://react.dev/reference/react/useRef#useref</a>
1) You can mutate the ref.current property. Unlike state, it is mutable. However, if it holds an object that is used for rendering (for example, a piece of your state), then you shouldn’t mutate that object.
2) Do not write or read ref.current during rendering, except for initialization. This makes your component’s behavior unpredictable.
In React Metronic, at Vertical Wizard "submit" button, Metronic developers decided to use this:
const stepper = useRef<StepperComponent | null>(null);
<button type="submit" className="btn btn-lg btn-primary me-3">
<span className="indicator-label">
{stepper.current?.currentStepIndex !==
stepper.current?.totatStepsNumber! - 1 && "Continue"}
{stepper.current?.currentStepIndex ===
stepper.current?.totatStepsNumber! - 1 && "Submit"}
<KTSVG
path="/media/icons/duotune/arrows/arr064.svg"
className="svg-icon-3 ms-2 me-0"
/>
</span>
</button>is there any particular reason for doing this? could you care to explain in more detail?
Replies (1)
Hi Feraru,
Thank you for reaching out to us.
This is a good catch, it seems like this is leftover from Metronic older version and in this case, it is better to use useState hook.
In this case, the stepper is used only to initialize objects so it shouldn't cause any errors but we will change it to useState hook in the next Metronic releases.
Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
