# nimm-react

> React engine on the server

Latest version **1.3.0** (published 2022-03-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install nimm-react
pnpm add nimm-react
yarn add nimm-react
bun add nimm-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2022-03-03 |
| First published | 2019-07-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 257.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nimm |
| Maintainers | jadeitedrake0 |

## Links

- npm: https://www.npmjs.com/package/nimm-react
- npm.io page: https://npm.io/package/nimm-react

## Dependencies (9)

- [tsc](https://npm.io/package/tsc.md) ^1.20150623.0
- [chai](https://npm.io/package/chai.md) 4.2.0
- [mocha](https://npm.io/package/mocha.md) 6.1.4
- [sinon](https://npm.io/package/sinon.md) 7.3.2
- [ts-node](https://npm.io/package/ts-node.md) 8.0.1
- [ts-promise](https://npm.io/package/ts-promise.md) ^2.1.0
- [typescript](https://npm.io/package/typescript.md) 3.2.4
- [@types/node](https://npm.io/package/@types/node.md) 10.12.18
- [@types/mocha](https://npm.io/package/@types/mocha.md) 5.2.7

## Recent versions

- 1.3.0 (latest) — 2022-03-03
- 1.2.0 — 2022-03-03
- 1.1.0 — 2022-03-03
- 1.0.25 — 2020-09-25
- 1.0.23 — 2020-06-17
- 1.0.22 — 2020-06-17
- 1.0.21 — 2019-07-18
- 1.0.20 — 2019-07-16
- 1.0.19 — 2019-07-15
- 1.0.18 — 2019-07-12
- 1.0.17 — 2019-07-12
- 1.0.16 — 2019-07-11
- 1.0.15 — 2019-07-11
- 1.0.14 — 2019-07-09
- 1.0.13 — 2019-07-09
- … 12 more at https://npm.io/package/nimm-react/versions

## README

# NIMM-REACT

React works great on the client why not use it on the server?  Now you can.

```
const {
    root, 
    component, 
    useState, 
    useEffect, 
    useRef
} = require('nimm-react');
```

## install

`npm install --save nimm-react`

## what is supported

### root

This is where it all starts similar to ReactDOM.render.  You can pass in multiple components.  Returns destructor object.

```
const destructor = root(
    component(fn1),
    component(fn2),
    component(fn3)
); // start

destructor.shutdown(); // this will shut down the system.
```

### component

Component on the server would represent a unit of activity.  This takes a function reference and an object for props.  No class components.  Component will rerender if any props differ by reference or if internal hook queued a rerender.  Component can return another component, an array of components or nothing.

```
function animals() {
    const dogprops = useDog();
    const catprops = useCat();
    return [
        component(dog, {...dogprops}),
        component(cat, {...catprops}),
    ]
}

root(component(animals))
```

### useState

This functions just like useState hook (https://reactjs.org/docs/hooks-state.html) except this will also expose a 3rd prop which, when called, will force reload the state.  This is usefull when dealing with modules that rely on reference integrity instead of state.

```
const _model = require('3rd-party-module');
function useModel() {
    const [model, setModel, rerun] = useState(_model);

    const update(prop, val) {
        model[prop]=val;
        rerun();
    }

    return [model, update];
}
```

Given the simplicity of the engine you can call setVal in the body of the component.  The component will queue the update and rerender based on setImmediate.

Setting value is possible using a function.  Just like in React this will update the state in order queued.

```
const [a,setA]=useState(1);
setA(async a=> { // a is 1 and returns 2;
    await new Promise(res=>setTimeout(res,1000))

    return a+1;
})
setA(a=> { // a is 2  and returns 3;
    return a+1;
}) 
```

Use State also exposes the guts of the hook as a 4th variable.

### useEffect

Just like useEffect in React https://reactjs.org/docs/hooks-state.html.  Keep in mind that destructors will run immidiately before a new effect hook runs.  By that time the never version of a component has already run and 'rendered'.

### useRef

Just like useRef in React https://reactjs.org/docs/hooks-effect.html

### useCallback

Juse like useCallback in React https://reactjs.org/docs/hooks-reference.html#usecallback

### useResetableState

If you think about it, useCallback is just like useState but with ability to reset it.  So there you go, enjoy.

```
const [val, setVal, _rerun, _guts] = useResetableState(img.username, [img.id]);
```

---
_Source: https://npm.io/package/nimm-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._