- With what version of React is ReactN bundled?
- What version(s) of React does ReactN support?
- What if my project requires a clean copy of React also?
- When do I import from React and when do I import from ReactN?
- Is my
create-react-appproject supported? - How do components update?
ReactN does not come bundled with React. You must install React alongside it. ReactN piggybacks off whatever version of React that you choose to use.
You may use any version of React with ReactN. You may freely upgrade or downgrade to any version of React without impacting your ReactN installation.
ReactN does not mutate the React package or object. It extends a copy of it. You can use React and ReactN in the same project, even in the same file!
Your react package and its imports are completely unmodified by the use of
ReactN.
import React from 'react';
import ReactN from 'reactn';
assert(React.Component !== ReactN.Component);
The simplest solution is to always import from reactn, as ReactN exports
the entire React package in addition to global state functionality. Any time
importing from React will work, importing from ReactN will also work.
If your functionality exists on the React package, such as
React.createElement, you may import that functionality from react.
If your functionality involves global state, such as the setGlobal helper
function, useGlobal hook, or ReactN versions of Component and
PureCompnent (which implement the global state member variables and methods),
you must import them from reactn.
Yes! ReactN supports projects bootstrapped with create-react-app.
When a component's local state changes, that component "updates" or re-renders.
It would not be performant to update every component when the global state changes. Instead, a component only updates if a global state root property that that component has accessed has changed.
If your component accesses this.global.x, it will not re-render when
this.global.y changes.
If your component accesses this.global.myObject.x, it will re-render when
this.global.myObject.y changes, because the root property myObject has
changed. You should take this into consideration when nesting objects in your
global state.
If you strongly desire to circumvent this behavior, you may use the
withGlobal higher-order component to wrap a React.memo functional component
or PureComponent.
import React, { memo, withGlobal } from 'reactn';
const Me = memo(
({ age, name }) =
<p>My name is {name}, and I am {age}!</p>
);
export default withGlobal(
(global, props) => ({
age: global.people[props.person].age,
name: global.people[props.person].name
})
)(Me);