Repository: 4ian/GDevelop
File: newIDE/app/src/LayersList/index.js (JavaScript)

Code before:
        if (treeViewRef.current) treeViewRef.current.forceUpdateList();
      },
      [forceUpdate]
    );

    const scrollToItem = React.useCallback((itemId: string) => {
      if (treeViewRef.current) {
        treeViewRef.current.scrollToItemFromId(itemId);
      }
    }, []);

    React.useImperativeHandle(ref, () => ({
      forceUpdateList: () => {
        forceUpdate();
        if (treeViewRef.current) treeViewRef.current.forceUpdateList();
      },
    }));

    const editName = React.useCallback(
      (layerName: string) => {
        // Don't allow renaming base layer (empty name)
        if (!layerName) return;

        // Find the layer ID from the layer name
        const layer = layersContainer.getLayer(layerName);
        if (!layer) return;

        const itemId = `layer-${layer.ptr}`;
        const treeView = treeViewRef.current;
        if (treeView) {
          if (isMobile) {
            // Position item at top of the screen to make sure it will be visible
            // once the keyboard is open.
            treeView.scrollToItemFromId(itemId, 'start');
          }
          treeView.renameItemFromId(itemId);
        }
      },
      [isMobile, layersContainer]
    );

    const onTreeModified = React.useCallback(
      (shouldForceUpdateList: boolean) => {
        triggerUnsavedChanges();

        if (shouldForceUpdateList) forceUpdateList();
        else forceUpdate();
      },
      [forceUpdate, forceUpdateList, triggerUnsavedChanges]
    );


Review comment (bug):
Check the type or even the C++ code: the layer will never be null. This is a difference compared to JS libraries (which are indeed often returning null when something does not exist. But we can't do it in C++ converted to JS).
To save you from a crash, the C++ will return a "bad layer" (i.e: an empty layer) in case you get one with a wrong name.

To be safe, you need to do:
```suggestion
        if (!layersContainer.hasLayerNamed(layerName)) return;
        const layer = layersContainer.getLayer(layerName);
```

Code after:
        if (treeViewRef.current) treeViewRef.current.forceUpdateList();
      },
      [forceUpdate]
    );

    const scrollToItem = React.useCallback((itemId: string) => {
      if (treeViewRef.current) {
        treeViewRef.current.scrollToItemFromId(itemId);
      }
    }, []);

    React.useImperativeHandle(ref, () => ({
      forceUpdateList: () => {
        forceUpdate();
        if (treeViewRef.current) treeViewRef.current.forceUpdateList();
      },
    }));

    const editName = React.useCallback(
      (layerName: string) => {
        // Don't allow renaming base layer (empty name)
        if (!layerName) return;

        if (!layersContainer.hasLayerNamed(layerName)) return;
        const layer = layersContainer.getLayer(layerName);

        const itemId = getLayerTreeViewItemId(layer);
        const treeView = treeViewRef.current;
        if (treeView) {
          if (isMobile) {
            // Position item at top of the screen to make sure it will be visible
            // once the keyboard is open.
            treeView.scrollToItemFromId(itemId, 'start');
          }
          treeView.renameItemFromId(itemId);
        }
      },
      [isMobile, layersContainer]
    );

    const onTreeModified = React.useCallback(
      (shouldForceUpdateList: boolean) => {
        triggerUnsavedChanges();

        if (shouldForceUpdateList) forceUpdateList();
        else forceUpdate();
      },
      [forceUpdate, forceUpdateList, triggerUnsavedChanges]
    );

    const triggerOnLayersModified = React.useCallback(