From a684943bb7b5e72bfce7a5a656f8d4b4ad3fa048 Mon Sep 17 00:00:00 2001
From: Asger F <asgerf@github.com>
Date: Thu, 19 Feb 2026 11:26:09 +0100
Subject: [PATCH] JS: Model mobx-react{-lite} as higher-order component
 builders

---
 javascript/ql/lib/semmle/javascript/frameworks/React.qll      | 2 ++
 .../ql/test/library-tests/frameworks/ReactJS/tests.expected   | 2 ++
 .../frameworks/ReactJS/useHigherOrderComponent.jsx            | 4 ++--
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/javascript/ql/lib/semmle/javascript/frameworks/React.qll b/javascript/ql/lib/semmle/javascript/frameworks/React.qll
index d55ace8636d..5d77a1e801c 100644
--- a/javascript/ql/lib/semmle/javascript/frameworks/React.qll
+++ b/javascript/ql/lib/semmle/javascript/frameworks/React.qll
@@ -802,6 +802,8 @@ private DataFlow::SourceNode higherOrderComponentBuilder() {
   or
   result = DataFlow::moduleMember("recompose", _).getACall()
   or
+  result = DataFlow::moduleMember(["mobx-react", "mobx-react-lite"], "observer")
+  or
   result = reactRouterDom().getAPropertyRead("withRouter")
   or
   exists(FunctionCompositionCall compose |
diff --git a/javascript/ql/test/library-tests/frameworks/ReactJS/tests.expected b/javascript/ql/test/library-tests/frameworks/ReactJS/tests.expected
index 6186b99180c..16d31cd07e1 100644
--- a/javascript/ql/test/library-tests/frameworks/ReactJS/tests.expected
+++ b/javascript/ql/test/library-tests/frameworks/ReactJS/tests.expected
@@ -10,6 +10,8 @@ getACandidatePropsValue
 | props.js:30:46:30:67 | "propFr ... tProps" |
 | props.js:32:22:32:34 | "propFromJSX" |
 | props.js:34:33:34:53 | "propFr ... ructor" |
+| useHigherOrderComponent.jsx:5:33:5:37 | "red" |
+| useHigherOrderComponent.jsx:11:39:11:44 | "lazy" |
 | useHigherOrderComponent.jsx:17:40:17:46 | "lazy2" |
 getACandidateStateSource
 | es6.js:14:1:20:1 | class H ...     }\\n} | es6.js:18:22:18:31 | { baz: 42} |
diff --git a/javascript/ql/test/library-tests/frameworks/ReactJS/useHigherOrderComponent.jsx b/javascript/ql/test/library-tests/frameworks/ReactJS/useHigherOrderComponent.jsx
index d44c307766a..dba28fd1c6c 100644
--- a/javascript/ql/test/library-tests/frameworks/ReactJS/useHigherOrderComponent.jsx
+++ b/javascript/ql/test/library-tests/frameworks/ReactJS/useHigherOrderComponent.jsx
@@ -2,13 +2,13 @@ import SomeComponent from './higherOrderComponent';
 import { lazy } from 'react';
 
 function foo() {
-    return <SomeComponent color="red"/> // $ MISSING: getACandidatePropsValue
+    return <SomeComponent color="red"/> // $ getACandidatePropsValue
 }
 
 const LazyLoadedComponent = lazy(() => import('./higherOrderComponent'));
 
 function bar() {
-    return <LazyLoadedComponent color="lazy"/> // $ MISSING: getACandidatePropsValue
+    return <LazyLoadedComponent color="lazy"/> // $ getACandidatePropsValue
 }
 
 const LazyLoadedComponent2 = lazy(() => import('./exportedComponent').then(m => m.MyComponent));