Anyone have an example project of using React Hooks? Having trouble getting them to work correctly.

# javascript

[Sam Garfinkel]

Anyone have an example project of using React Hooks? Having trouble getting them to work correctly.

[Soren Valle]

I was able to get them working a bit a little while ago. I remember an issue I had was that the needed to be used in a functionalComponent

This is from an older project and I'm assuming it still works: https://gist.github.com/SorenV/1db5adf5bc5018e7147b963c24bf71d8

[Sam Garfinkel]

@Soren Valle Thank you!

[Sam Garfinkel]

@Soren Valle How do you compose functional components? That was what I was getting stuck on

[Soren Valle]

The gist has a fuller example, but the tldr is

val myFuncComp = functionalComponent<WithRouter<RProps>> {
    div{
        +"Things"
    }
}

[Soren Valle]

Then you can use it the same as a class component

[Soren Valle]

er the with router is something else

[Sam Garfinkel]

Sorry, should clarify: I meant, how can I then use myFuncComp in some other RBuilder function? You mean:

render(...) {
    child(myFuncComp) {}
}

[Soren Valle]

Yeah

[Sam Garfinkel]

Ok, I'll try, that's what was tripping me up, for some reason stuff wouldn't re-render.

[Sam Garfinkel]

Then again, coming from JavaFX/Swing, the react data model is weird and foreign

[Soren Valle]

Meaning the hook wouldn't react?

[Soren Valle]

Yeah I started learning react in kotlin it is a little different than what I'm used to.

[Sam Garfinkel]

The components wouldn't react, but I'm sure my code was just invalid or incorrect somewhere.

[Sam Garfinkel]

To be totally honest, I think Angular would be easier coming from Java, it's data model is oriented around bindings, which is like JavaFX

[Sam Garfinkel]

Redux's state container seems similar to Swing's event oriented approach though.

[Soren Valle]

I don't know if you have time, but the kotlin ecosystem needs contributors and an angular wrapper is not only a good way to learn kotlin more, but serves to bring more people in. Just a thought

[Soren Valle]

Not sure what it would take for angular. It's fairly mature.

[Sam Garfinkel]

I think it would take a decent amount of effort and is out of the scope of my current work sadly, maybe as a side project though.

[Sam Garfinkel]

I would also add, an awesome-kotlin-js list would be really nice so people can find KotlinJS/Multiplatform libraries easily and could find existing kotlin wrappers. NVM: https://github.com/KotlinBy/awesome-kotlin#kotlin-javascript-back-

[Soren Valle]

That's true. I was thinking about something like that for types. Because as amazing as dukat is...

[Soren Valle]

huh

[Soren Valle]

didn't know about that

[Soren Valle]

good to know

[Soren Valle]

It's just finding maintainers or being willing to maintain it yourself for free

[Sam Garfinkel]

Seems annoyingly out of date. ts2kt has basically been deprecated by Dukat, and the frontend-plugin and kotlin-loader are both replaced by the official MP plugin

[Soren Valle]

I think things will get better once they work through some of the outstanding issues of kotlinJs plugin and Dukat gets more accurate. It's pretty good for what it does, but it's far from reliable. Glad someone is working on it though.

[Soren Valle]

Gl with the hooks

[Zachary Grafton]

I have had extremely good luck using functionalComponent with hooks, and I highly recommend looking at the useReducer hook, it essentially make redux useless if you combine it with react contexts.