OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Set a state from useState without triggering useEffect hook

  • Thread starter Thread starter Ling Vu
  • Start date Start date
L

Ling Vu

Guest

The problem​


I want to prevent the triggering of a useEffect hook which contains a useState value in the dependency array. To make it clear, look at the example.

Detailed explanation​


In the initialization process a form will set some values therefore I defined a flag to prevent the other effect to execute before it is fully initialized, but I also don't want to trigger the second effect when the initialization flag state is changed.

Can I somehow prevent the tracking of this isInitialization state? I couldn't find a thread which is solves my problem. Would you maybe so kind to link the threads which are related to that? Thanks in advance.

Example​


Code:
export function SomeComponent(props) {
  const [form] = useForm();
  const [settings, setSettings] = useState(props.initialSettings);
  const [isInitialization, setIsInitialization] = useState(true);

  /**
   * Updates the form settings state, just for initialization
   */
  useEffect(() => {
    if (isInitialization) {
      form.setFieldsValue({
        ...settings,
      });
      setIsInitialization(false); // <-- This should not trigger any useEffect
    }
  }, [settings, form, isInitialization]);

  useEffect(() => {
    if (props.settingsChanges && !isInitialization) {
      props.settingsChanges(settings, isValid && hasRequiredFields);
    }
  }, [settings, props, isInitialization]);
}

<h3>The problem</h3>
<p>I want to prevent the triggering of a useEffect hook which contains a useState value in the dependency array. To make it clear, look at the example.</p>
<h3>Detailed explanation</h3>
<p>In the initialization process a form will set some values therefore I defined a flag to prevent the other effect to execute before it is fully initialized, but I also don't want to trigger the second effect when the initialization flag state is changed.</p>
<p><strong>Can I somehow prevent the tracking of this <code>isInitialization</code> state?</strong>
I couldn't find a thread which is solves my problem. Would you maybe so kind to link the threads which are related to that? Thanks in advance.</p>
<h3>Example</h3>
<pre><code>export function SomeComponent(props) {
const [form] = useForm();
const [settings, setSettings] = useState(props.initialSettings);
const [isInitialization, setIsInitialization] = useState(true);

/**
* Updates the form settings state, just for initialization
*/
useEffect(() => {
if (isInitialization) {
form.setFieldsValue({
...settings,
});
setIsInitialization(false); // <-- This should not trigger any useEffect
}
}, [settings, form, isInitialization]);

useEffect(() => {
if (props.settingsChanges && !isInitialization) {
props.settingsChanges(settings, isValid && hasRequiredFields);
}
}, [settings, props, isInitialization]);
}

</code></pre>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top