React 16.8 Hooks compatibility

[antonyrey]

Hello,

Is it possible to use dotNetify with React's Hook-based components ?

Thank you, have a nice day

[dsuryd]

You can try and let me know :)

[antonyrey]

I tried but had no success, it looks like the dotnetify.connect method expects to receive a true "class-based component", to work... i wanted to use getState and setState options but an exception is thrown if i pass null as parameter value for the component

[dsuryd]

How would you make sure the vm.$destroy is called on component dismount when using Hook?

[antonyrey]

to implement mount and unmount actions, call "useEffect" on the top level of your function-based component :

useEffect(() => {

// Here is the code called on Mount

return () => {

   // here is the code called on unmount

};

});

[dsuryd]

Give me a proposal on how would you transform the Real-Time HelloWorld example into a Hook function; thanks!

[dsuryd]

Looks like somebody's already done this: https://github.com/lilasquared/use-dotnetify

[sdpollack]

It would be nice to update the documentation to to use hook examples. My team has completely moved away from components to use hooks.

[lilasquared]

@dsuryd I have created a pull request to finish up hooks support for my hook package use-dotnetify https://github.com/lilasquared/use-dotnetify/pull/3.

One thing preventing me from using typescript in the project is this type definition https://github.com/dsuryd/dotNetify/blob/84d9a5e20ba9729de99f75f28a9cde98e185c245/DevApp/src/typings/dotnetify.d.ts#L47

Is it possible for you to create your own type interface that abstracts using the explicit React.Component type?

Edit: I'm actually able to work around this by stubbing out the missing props and casting to React.Component, but since it seems you only ever use state and setState (i see props being used to create a component object but not used within the dotnetifyVM) it might make sense to abstract this anyway.

[dsuryd]

Would it be better if you use this one that doesn't require React.Component: https://github.com/dsuryd/dotNetify/blob/84d9a5e20ba9729de99f75f28a9cde98e185c245/DevApp/src/dotnetify/core/dotnetify.js#L59

[lilasquared]

that definitely would be easier, though for some reason i am getting

Property 'connect' does not exist on type 'typeof dotnetify'.

edit: if i add a d.ts file and reference "dotnetify/dist/dotnetify" i am able to get it to recognize it edit2: nvm that doesn't actually work

[dsuryd]

Hmm, the typing is there: https://github.com/dsuryd/dotNetify/blob/84d9a5e20ba9729de99f75f28a9cde98e185c245/DevApp/src/typings/dotnetify.d.ts#L73 Is it because of the static?

[lilasquared]

Could it be because the typings module default export is named "dotnetify" and the default export from index.js is "dotnetify". It seems i'm not able to access the class only the instance.

[lilasquared]

@antonyrey v2 of use-dotnetify hook is published, if that works for you this issue can probably be closed.

[dsuryd]

Included in v3.5 a simple implementation of React hook useConnect. Documentation is updated with examples.

[lilasquared]

@dsuryd were you able to get around the re-connection issue?

[dsuryd]

I haven't, but will look into it next.