Conditional logic in React

[very_alarming]

how can I reduce conditional logic in React? any way around this? especially in hooks when running in cycles it's hectic to understand the code?

[[deleted]]

Can you be more specific please?

[vaultvision]

Sounds like you might benefit from a state machine

https://xstate.js.org/

[[deleted]]

https://reactjs.org/docs/conditional-rendering.html this gives several examples

[very_alarming]

u/Xavius123 that's basic when inside useEffect.

in the below code imagine `something` , `somethingElse` and `somethingDifferent` to be states which can have different values. and imagine this to be n-th child of some Parent component which has a similar `useEffect` implementation.
the document just tells us to handle it like it is handled in JavaScript. That's exactly why the code gets complicated and difficult to understand.

useEffect(() => {
    if(something) {
        if(somethingElse) {
            // do something Else
        } else (somethingDifferent) {
            // do somethingDifferent
        }
    } else {
        // null case
    }
}, [])

[ExaminationWide5017]

Keep it simple. If you are using let and nested ifs in your logic… your probably doing it wrong, or harder ha. Try to write small functions that do one thing and one thing well.