Uploaded by
Published on

A minimal, modern react binding focusing on ease-of-use

Status: alpha

Features are being added and tested as I need them for work.

Hooks believed to work correctly (including variants)

  • useState
  • useReducer
  • useContext
  • useRef
  • useEffect
  • useLayoutEffect


For a long time, the only way to do react was with class components. Libraries to make this easier popped up and we all ended up writing code with them. It is often verbose and difficult to reason about, but it works.

React 1.4 introduced stateless function components, a simpler way to build simple components. They are basically stateless functions taking a set of props and returning a React Element. The lucky users whose libraries supported stateless function components gained a simple model for building and reasoning about simple React components.

React 16.8 introduced 'hooks', turbocharging function components and making them equivalent in power to class components. Hooks are side effecting functions that can be used within a function component in order to tap into the extra facilities provided by the React library.

Hooks are IMHO a breakthrough feature. They're simple to reason about and they're low on boilerplate. They make React programming much more fun and productive and I never want to touch a class component again.

Reactix is a modern, Hooks-first React library focusing on simplicity and ease-of-use.


If you wish to use this library with other react libraries, you will need to write a little glue. The minimum you can sanely get away with is a typed wrapper over unsafeCoerce between Element and whatever your other library's element type is.


If you already use purescript-react-basic, you may prefer purescript-react-basic-hooks, a similar library implemented on top of purescript-react-basic.


Not in any particular order

  1. Safe DOM props:
  • Make sure each element only takes the correct props
  1. Refs
  • Test forwardRef
  1. Context
  • Test consumer (we only test useContext right now)
  1. Misc hooks
  • Test useEffect/useLayoutEffect are fired at the correct stage
  • Test useEffectOnce/useLayoutEffectOnce are fired once
  • Test useMemo/useCallback
  • Test useImperativeHandle
  • Test useDebugValue
  • Test React.isValid
  1. Setter - a shorthand for setter functions
  2. Reductor - a reducer that lives in Effect
  3. Actor - a shorthand for the transformer
  4. Stator - a state that lives in Effect

Ideas we're not yet convinced on:

  • Move to Aff instead of Effect (not currently convinced)


  • Nicolas Pouillard, for the discussions that continue to shape the design of reactix.
  • The rest of the gargantext team, for their enthusiasm both for reactix and for replacing thermite.

Copyright and License

Copyright (c) 2018 James Laver and the Gargantext team

This software is free and open source software licensed under the terms of the Mozilla Public License (MPL) 2.0