rescript-lang.org Documentation Platform

ReScript provides first-class bindings for ReactJS (compatible with React v18.0 and newer). The bindings are designed to compile to idiomatic JavaScript, making it easy to transfer React knowledge to ReScript and integrate with existing ReactJS codebases and libraries.

Key features include:

• Native JSX Support: No Babel plugins are required as JSX is built into the ReScript language.
• Essential React APIs: Includes standard hooks like useState, useReducer, useEffect, and useRef.
• Function Component Focus: The bindings do not support the component class API; all code is built using function components and hooks.
• Type Safety: Provides strong type safety and type inference for component props and state values.
• TypeScript Interop: Supports GenType for importing and exporting React components in TypeScript codebases.

ReScript is the unified brand for the technology previously known as BuckleScript and the JavaScript-focused parts of Reason.

Key distinctions:

• ReScript: The unified experience for JavaScript developers, including the compiler, build system, and the new ReScript syntax. It is optimized for JS interoperability and a fast, lean toolchain.
• Reason: Continues to serve as a syntax layer for native OCaml. While you can still use Reason with Js_of_ocaml to output JS, the community focus has shifted to ReScript for JS-related development.
• OCaml: The underlying typed FP language. ReScript's compiler continues to acquire relevant upstream OCaml features.

To ensure you are receiving accurate information and official news, only rely on the following channels. ReScript does not use Reddit, Discord, or Medium for official communication; announcements on those platforms may not represent the project's intent.

Official News Channels:

• The ReScript website blog
• Bluesky
• X (formerly Twitter)
• Forum Announcements category

Official Community Channels:

• ReScript Website
• ReScript Forum
• ReScript GitHub Organization
• ReScript YouTube Channel
• Bluesky
• X (formerly Twitter)

A custom Hook is a function whose name starts with use that can call other Hooks. They allow you to extract existing component logic into reusable, separate functions. This is useful when you need to share stateful logic (like subscribing to an external API or managing complex state transitions) between multiple React components without duplicating code or adding extra components to the render tree via render props or higher-order components.

let useFriendStatus = (friendId: string): state => {
  let (state, setState) = React.useState(_ => Offline)

  React.useEffect(() => {
    // ... logic
  })

  state
}

genType is a code generation tool included in the ReScript compiler that enables interoperability between ReScript and TypeScript. It performs a type-directed transformation of ReScript programs after compilation, converting ReScript values and types into idiomatic TypeScript types.

For example, a ReScript variant is transformed into a TypeScript union of objects with a TAG property:

@genType
type t = | A(int) | B(string)

becomes:

type t = { TAG: "A"; _0: number } | { TAG: "B"; _0: string };

A variant is a data structure that allows you to express "this or that" (sum types), as opposed to standard structures that express "this and that" (product types). A variant is defined by a set of cases called "variant constructors" or "variant tags".

Key Rule: Variant constructors must be capitalized.

type myResponse =
  | Yes
  | No
  | PrettyMuch

let areYouCrushingIt = Yes

React Context provides a mechanism to share data through the component tree without manually passing props down through every level (prop drilling).

When to use Context

Use Context for data that is considered "global" for a specific tree of components, such as:

• Authenticated user information
• UI themes (e.g., Light/Dark mode)
• Preferred language/locale

When to prefer Props

In ReScript, because of JSX prop punning and strong type inference, passing props is often simpler and more transparent than in JavaScript or TypeScript. It is generally preferable to use standard props unless the data is truly global to a large tree, as it avoids the "magic" and complexity of Context.

A React component in ReScript is a function that describes a UI element. It receives a props object (defined via labeled arguments) as a parameter and returns a React.element.

To define a component, you must use the @react.component attribute and name the function make.

@react.component
let make = () => {
  <div>
    {React.string("Hello ReScripters!")}
  </div>
}