Hello,

I am receiving a warning when I use Hookstate with NextJS.

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

I am not able to find any instruction on how to use Hookstate with Next.

Any help is greatly appreciated.

Any applications in the wild currently using this that you're aware of? The library seems really interesting and all the demo snippets are fantastic, but coming from a redux background I'm trying to wrap my head around how it'd be implemented in a real-world application. Specifically in terms of architecture and recommended design patterns.

createStateLink({a: 1}).with(Mutate) does not work, throws an error Is it supposed to work like this ? Also, I see in the Mutate example: Mutate(state) But in validation example I see Validation(state) but also .with(Validation)

I would like to do it once with(mutate) and use Mutate functions everywhere

useStateLink(FieldStore).with(Mutate) doesn't work as well

Hi avkonst,

Amazing library you've built here. It looks exactly like the type of thing I was imagining. I'm going through evaluating libraries to try to get to a less hacky way of implementing state.

I had a question on a specific use case that's not obvious to me if hookstate would handle well (or could have a plugin written to handle).

I have a large recursive nested structure, basically a workflow of questions and answers which lead to more questions then more answers and so on. I've built a hacked-together solution with regular react components (well, preact), where the top-level component has the entire tree as a state variable, passing down sections of the tree to its children, and then each nested component has an oninput that mutates its section of the tree directly and then calls forceUpdate(). This works because the tree of Components mirror the tree of the state, so forceUpdate() correctly cascades for the corresponding subtree. I'm sure many would cry at this implementation, but it works well enough.

In hookstate, it looks like nested combined with the usage of scoped states would work well enough as a replacement here. The subtree would get passed in to each component, and it would be able to set on the scoped state oninput, which should then update the state and trigger a render.

Then, I support undo/redo functionality, by changing the top-level state tree into a proxy, so when anything is set or delete, I store a snapshot of the whole tree, and then undo/redo buttons just setState the whole tree with the snapshot, so everything renders as normal.

This is then where I'm not sure how I would implement this snapshot/apply functionality in hookstate. I think what I would want is some way to know at the top-level (or maybe even any nested level) that there is a change down the line, so that I can know to store a snapshot. There is a Touched plugin demo that shows the parent knows when it was touched, but do those just store a one-time flag for the first change? Or is there some way to subscribe to any changes? This also makes me think about things like time travel, though I think maybe your library specifically chose to eschew this functionality.

Maybe I'm thinking about this the wrong way, and it would just be most straightforward to add a transform for saveSnapshot and have the Component oninput function just call that after state set.

Any thoughts/advice?

My application has thrown a hookstate error 111 with the link https://hookstate.js.org/docs/exceptions/#hookstate-111. This does not exist in the documentation.

Use Case:

There is a form object (say, DTO for REST or GraphQL parameter), that has nested optional arguments:

interface Argument {
  root: string;
  nested?: {child: string}
}

Currently, in order for hook state to support writing to nested objects which do not exist yet, you have to put empty objects in the state:

const state = useState({root: 'foobar', nested: {} as any});

If you do not insert an empty object, code like this will break:

const scoped = useState(state);

// nested = undefined error
scoped.nested.child.set('wee');

Currently my project has these empty objects defined everywhere and this is something that can easily bite you at runtime depending on how things are setup.

Is it feasible for the library to support constructing missing object paths?

First of all, thank you for this awesome lib!

I found myself having difficulties trying to find the right way to implement some state updates efficiently, and the following reflexion arose:

What about using Immer? Thanks to its support for patches, would allow this lib to support a wider range of operations, on all sort of data types. set and merge methods could be replaced by produce, and plugins could leverage patches (which would be useful for my plugin).

I really like the whole intelligent proxy system that is currently in place, and I honestly think that putting Immer in there would make the whole lib even better!

I wonder if this is something possible? Or is there some limitations or willingness to keep everything inside hookstate itself?

Here is the prototype of devtools. It injects to Hookstate as a standard plugin, which submits state changes to Redux DevTools. Should I finalise it? Please comment / react to express your interest.

Here is the screenshot:

I'm sending an object state as a prop down to the child to be set as an initial value of the child state. Now I'm using the recommended way to do this as highlighted in 102 exception.

Then I simply mutates the child state but find "initial value" prop getting updated too. This is undesirable and I can't seem to understand the reason for this behavior.

I'm using v3.0.13

Here's the code snippet:

const ParentComponent = () => {
   const parentState = useState({ a: [1, 2], b: [2, 3], c: [4, 5] });
  
  return (
     <ChildComponent  
           initalVal={JSON.parse(JSON.stringify(parentState.get()))}
      />
  );
};

const ChildComponent = ({ intialVal }) => {
   const childState = useState(initialVal);

   const updateChildState = () => {
         childState.a.set(p => {
                p.splice(1, 1);
                return p;
         });
   }; 

  return (
       <Text>Initial A : {JSON.stringify(initalVal.a)}</Text>
       <Text>Updated Child State A: {JSON.stiringify(childState.a.get())}</Text>
       <Button
            ...
            onPress={updateChildState}
       />
  );
};

Expecting: Initial A: [1, 2]

Actually getting: Initial A: [1]

We tried to implement hookstate into our serverless app and we needed to send objects from the state to the firebase database. However, in order to do so, we needed to do the following:

const data = myState.attach(Downgraded).get()

This has one main issue, which is the reason we scrapped hookstate in favor of something else. It's not intuitive, a person who hasn't read the docs a couple of times won't know what is going on. It's also really counter intuitive how .get() returns you a proxy, which can't be used directly in JSON API request. I get that there has to be a reason to force everything to need Downgraded attached to get the pure value, but the way it has to be done is ugly. I suggest creating a function toObject() which can attach Downgraded internally, but it just has better code flow. The example from above would become the following:

const data = myState.toObject().get()

or

const data = myState.get().toObject()

I was initially stuck because I wanted my navigation to show badges when "tabs" had validation issues, but didn't want to re-render all the tabs on change. Initially I was doing

state.array.forEach(a => {
  Validation(a.name).validate(a => a.length > 0, 'Name required');
});

The problem with the above though is it will now subscribe my tab/navigation to any validation failures and cause a full re-render of all children.

Once I dug into the code I realized I could write it like this:

Validation(a.array[0].name).validate(a => a.length > 0, 'Name required');

Which actually ends up wildcarding behind the scenes, but not clear from the syntax. At the very least would be helpful to document this current behavior, but I think a more idiomatic syntax would be:

Validation(a.array).forEach(a => {
a.name.validate(a => a.length > 0, 'Name required');
});

I want to get an array as an array, not as an ImmutableObject and the unique thing that I thought was map the "array" to get an array, but when I use any function that I can use with arrays it hits the call stack limit: RangeError: Maximum call stack size exceeded.

This is my code:

// state.ts

const defaultData: RPC = {
	name: '',
	app_id: '',
        // ...
	buttons: [
		{ label: '', url: '' },
		{ label: '', url: '' }
	]
};

const state = {
	// ...
	formData: hookstate<RPC>(defaultData),
};

export default state;

// Main.tsx

const data = useHookstate(state.formData);
// ...
<div onClick={() => console.log(data.get().buttons.map((e) => e.label))}> Button </div>

I'm doing something wrong or is a bug? Thanks

The documentation and code mark the "engine"-prop as optional. However, the TypeScript type enforces it to be required, therefore any consumer who tries to omit this prop and use the default built-in engine gets a TypeScript error.

This change updates the argument-type of localstored, such that the "engine"-option becomes optional. Which allows a consumer to use the default build-in LocalStorage-based engine.

Old behaviour:

Documentation examples show usage of this plugin without explicitly setting an implementation for the engine: https://github.com/avkonst/hookstate/blob/master/docs/index/src/examples/plugin-localstored.tsx

Is there a way to get partial updates working when using classes instead of plain objects?

Consider the following example:

import React from 'react';
import { useHookstate } from "@hookstate/core";

class AppState {
  constructor() {
    this.a = 0;
    this.b = 0;
  }
}

export function App() {
  const state = useHookstate(new AppState())
  return (
    <div>
      <p>{new Date().toISOString().toString()}: {state.a.get()}</p>
      <Component count={state.b} />
    </div>
  );
}

function Component(props) {
  const count = useHookstate(props.count)
  return (
    <>
      <p>{new Date().toISOString().toString()}: {count.get()}</p>
      <button onClick={() => count.set(count => count + 1)}>Count</button>
    </>
  );
}

Here, both the parent component and the child component get updated when the button is clicked. When new AppState() is replaced with { a: 0, b: 0 }, only the child component gets updated. Is there a way to get the behavior from the plain object state while using a class object? I'm fully aware that Hookstate won't be able to catch every update when more advanced class features like getters and methods are used, but I'm willing to handle these cases myself.

I would like to use Hookstate to model the UI around an existing app state instead of duplicating the state for the UI, but this won't work if on every change the whole UI gets updated. Most of the app state behaves like a plain object, the class is mostly used for data validation and stuff like that.

The documentation of Hookstate says, that for non-plain objects, get() gets replaced with get({ noproxy: true }). I'm fine with that, but I think in the example above something else is going on because when I replace new AppState() with { a: 0, b: 0 } and both get calls with get({ noproxy: true }), the partial update still works.

Example Class State: https://playcode.io/1047463 Example Plain Object State: https://playcode.io/1047469 Example Plain Object State with { noproxy: true }: https://playcode.io/1047470

Hi, Thank you for working v4.0.0

When I update localstored 4.0.0-rc21 to 4.0.0 localstored raise type error.

type Foo = {
  name: string
}
const initialState = {
  name: '',
}

export const useNameState = () => {
  const state = useHookstate<Foo>(
    initialState,
    localstored({
      key: 'registration-key',
    })
  )
  return state
}

error TS2345: Argument of type '{ key: string; }' is not assignable to parameter of type '{ key?: string | undefined; engine: Stor
eEngine; initializer: () => Promise<Foo>; }'.

I refered with document. https://hookstate.js.org/docs/extensions-localstored

localstored 4.0.0-rc21 works fine.

Regards.

Hey there,

I'm have this code:

import { hookstate, useHookstate } from '@hookstate/core';

interface DraggableStoreNotDraggingState {
  dragging: false;
  waiting: false;
}

interface DraggableStoreWaitingState {
  dragging: false;
  waiting: true;
  waitingPoint: { x: number; y: number };
}

export interface DraggableStoreDraggingState {
  dragging: true;
  waiting: false;
  startingPoint: { x: number; y: number };
  currentPoint: { x: number; y: number };
}

type DraggableStoreState =
  | DraggableStoreDraggingState
  | DraggableStoreNotDraggingState
  | DraggableStoreWaitingState;

export const InitalState = Object.freeze({
  dragging: false as false,
  waiting: false as false,
});

const DraggableStore = hookstate<DraggableStoreState>({ ...InitalState });

if (DraggableStore.waiting.get()) {
  // typescript error
  DraggableStore.waitingPoint.get();
}

Basically typescript says that waitingPoint is undefined though waiting is true.

How should this be done?

Thanks

I'm hoping to get some guidance as I am struggling to get this to work and not sure if it is a bug (like in #286).

I have the following state:

{
  "item": {
    "name": "item name",
    "subItems": [
      {"name": "subitem1 name"},
      {"name": "subitem2 name"}
    ]
  },
  "options": {
    "key": "value"
  }
}

When I try to replace the items found in item.subItems I get the following error in the console:

TypeError: 'get' on proxy: property '0' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '#<Object>')

I can update the parent item without issue.

state.item.merge({"name":"new item name"}) 

I can empty the subItem child without issue.

state.item.subItems.set([]) 

I can modify items in the subItem array without issue.

state.item.subItems[1].merge({"name":"new subitem2 name"}) 

I cannot replace the contents of the subItems array with new items without the error above.

state.item.subItems.set([
  {"name": "different subitem1 name"},
  {"name": "different subitem2 name"}
]) 

Why is this happening?

::edit::

So it turns out that there must be something wrong with the data I'm retrieving and trying to add to the state. The following works without issue. Logging the array to the console doesn't reveal anything out of the ordinary, so not sure why it is behaving like this.

        state.item.subItems.set([]);
        for (const subItem of loadedSubItems) {
          const { name } = subItem;
          state.item.subItems.merge([{ name }]);
        }