JSI
- React Native course
- Expert
- Lesson 2/47
- 5 min
Learn the JSI (JavaScript Interface) concept.
What is JSI?
JSI (JavaScript Interface) is the direct bridge between the JavaScript engine and C++ code. The JavaScript side can call a C++ object's methods directly; no serialization happens.
On the old bridge every message was packed as JSON and shipped across; this created latency. With JSI, object references pass through; synchronous calls become possible. C++ host objects are added to the global object.
Synchronous calls
Thanks to JSI, some native operations can be synchronous. On the old bridge every native call was asynchronous and returned a Promise. With JSI they can return values directly.
Example: the JSI-based build of react-native-sqlite-storage returns query results synchronously. This gives a notable speed-up in data-heavy lists.
Practice Call the JSI module
Call the query method of a JSI-based Database module. Assign the result to a rows variable. Keep the call synchronous (no await).
Starter code
// Call the JSI module
// Assign the result to rows
export default function App() {
return null;
}Sample solution
// Call the JSI module
const rows = Database.query('SELECT * FROM users');
export default function App() {
return null;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is JSI's biggest advantage?
- Removing JSON serialization
- Bringing CSS support
- Writing fewer components Correct answer
- Making TypeScript required
Explanation: JSI removes serialization and gives synchronous direct access.
2 Where is the JSI host object added?
global.____ = createHostObject();global.MyModule = createHostObject();Explanation: Host objects are reached through global.
3 Match the JSI concepts
| Term | Meaning |
|---|---|
JSI |
Direct C++ binding |
Serialization |
JSON packing |
Synchronous call |
Call that waits for result |
Host object |
C++ object exposed to JS |