# Infinite loop when using "setValue" on checkbox

**URL:** <https://discourse.threejs.org/t/infinite-loop-when-using-setvalue-on-checkbox/94014>\
**Category:** Questions\
**Tags:** gui, lil-gui\
**Created:** [September 3, 2026, 12:51pm UTC](https://discourse.threejs.org/t/infinite-loop-when-using-setvalue-on-checkbox/94014 "2026-09-03T12:51:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SimRuJ](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@SimRuJ](https://discourse.threejs.org/u/SimRuJ)\
**Post date:** [September 3, 2026, 12:51pm UTC](https://discourse.threejs.org/t/infinite-loop-when-using-setvalue-on-checkbox/94014/1 "2026-09-03T12:51:38Z")

</div>

My Three.js website uses lil-gui to display a small menu with 2 options:

1. Background color (change the color)
2. Sky (displays a sky)

Adding the sky seems to override the background color, so there’s no need to change it, but if 1. is selected, then I want to disable 2. and also remove the tick in the checkbox.

My code:

```javascript
function createGUI() {
    ...
    skyEnabled = false;
    const propsGeneral = {
        "backgroundColorOption": backgroundColor.getHexString(),
        get "skyOption"() { return skyEnabled },
        set "skyOption"(v) {
            /*if(justTriggeredCheckbox) {
                justTriggeredCheckbox = false;
            } else {*/
                v ? enableSky() : disableSky();
            //}
        }
    };

    gui.addColor(propsGeneral, "backgroundColorOption")
        .onChange(val => { changeBackgroundColor(val); });
    skyCheckbox = gui.add(propsGeneral, "skyOption");
    ...
}

function disableSky() {
    //justTriggeredCheckbox = true;
    scene.remove(sky);
    scene.environment = null;
    skyEnabled = false;
    skyCheckbox.setValue(false);
}

function changeBackgroundColor(c) {
    if(!(c instanceof THREE.Color)) {
        c = new THREE.Color(c);
    }
    scene.background = c;
    disableSky();
}

```

Problem:

If I change the background color, then `skyCheckbox.setValue(false)` causes an infinite loop (because is triggers `disableSky()`, which triggers it again and again) and it crashes with a “too much recursion” error.

I added `justTriggeredCheckbox`, which helps but it looks kind of ugly. Is there a better (“official”?) way to do this?  
I know that Unity used to have the same problem but they eventually added an internal check, so it wouldn’t cause a loop if `setValue` is called in code.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [September 3, 2026, 2:03pm UTC](https://discourse.threejs.org/t/infinite-loop-when-using-setvalue-on-checkbox/94014/2 "2026-09-03T14:03:35Z")

</div>

Would the set-value-only-if-different-than-the-current-value approach work in your case?

```javascript
set "skyOption"(v) {
            if(v!=skyEnabled) v ? enableSky() : disableSky();
        }

```

---

<div class="post-metadata">

**Author:** ![SimRuJ](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@SimRuJ](https://discourse.threejs.org/u/SimRuJ)\
**Post date:** [September 3, 2026, 2:10pm UTC](https://discourse.threejs.org/t/infinite-loop-when-using-setvalue-on-checkbox/94014/3 "2026-09-03T14:10:46Z")

</div>

This works (and it’s great that it’s shorter), thanks! Is it what everyone usually uses?