[{"data":1,"prerenderedAt":72},["ShallowReactive",2],{"term-j\u002Fjsi":3,"related-j\u002Fjsi":59},{"id":4,"title":5,"acronym":6,"body":7,"category":40,"description":41,"difficulty":42,"extension":43,"letter":44,"meta":45,"navigation":46,"path":47,"related":48,"seo":53,"sitemap":54,"stem":57,"subcategory":6,"__hash__":58},"terms\u002Fterms\u002Fj\u002Fjsi.md","JSI",null,{"type":8,"value":9,"toc":33},"minimark",[10,15,19,23,26,30],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"JSI is the direct phone line React Native's new architecture uses instead of passing paper notes back and forth like the old bridge did. JavaScript can hold a reference to a native object and call its methods synchronously, no serialization, no waiting for a queue to drain. It's the plumbing that makes Fabric and TurboModules possible.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"JSI (JavaScript Interface) is a lightweight C++ layer in React Native that lets JavaScript hold direct references to native C++ objects and invoke their methods synchronously, without serializing data to JSON or crossing an asynchronous bridge. It is the foundational communication mechanism underlying Fabric and TurboModules in the New Architecture.",[11,27,29],{"id":28},"when-youll-hear-this","When You'll Hear This",[16,31,32],{},"\"JSI lets us call a native function and get the return value in the same tick, no more bridge round trip.\" \u002F \"Reanimated's UI-thread performance comes from talking to native code through JSI directly.\"",{"title":34,"searchDepth":35,"depth":35,"links":36},"",2,[37,38,39],{"id":13,"depth":35,"text":14},{"id":21,"depth":35,"text":22},{"id":28,"depth":35,"text":29},"frontend","JSI is the direct phone line React Native's new architecture uses instead of passing paper notes back and forth like the old bridge did.","advanced","md","j",{},true,"\u002Fterms\u002Fj\u002Fjsi",[49,50,51,52],"Fabric","TurboModules","Hermes Engine","Bridge (React Native)",{"title":5,"description":41},{"changefreq":55,"priority":56},"weekly",0.7,"terms\u002Fj\u002Fjsi","wjoh1jPcojiQPYeY0dtRhXhSGtM3IEmSugdvSIqk5wM",[60,63,66,69],{"title":52,"path":61,"acronym":6,"category":40,"difficulty":42,"description":62},"\u002Fterms\u002Fb\u002Fbridge-react-native","The Bridge is React Native's translator between JavaScript and native code.",{"title":49,"path":64,"acronym":6,"category":40,"difficulty":42,"description":65},"\u002Fterms\u002Ff\u002Ffabric","Fabric is React Native's new rendering system, the one that finally lets JavaScript and the native UI tree talk to each other synchronously instead of shou...",{"title":51,"path":67,"acronym":6,"category":40,"difficulty":42,"description":68},"\u002Fterms\u002Fh\u002Fhermes-engine","Hermes is Meta's custom JavaScript engine built specifically for React Native.",{"title":50,"path":70,"acronym":6,"category":40,"difficulty":42,"description":71},"\u002Fterms\u002Ft\u002Fturbomodules","TurboModules are React Native's rewrite of native modules so they load lazily and talk to JavaScript directly through JSI instead of shipping across the ol...",1792528093528]