Comments (4)
This is due to the fact that the hub is a ref and thus only created once, so the value of count
is always going to be 0.
This can be fixed like so:
let render = React.functionComponent(fun () ->
let count,setCount = React.useState 0
let countOne = React.useCallbackRef(fun () -> setCount (count + 1))
let hub =
React.useSignalR<Action,Response>(fun hub ->
hub.withUrl(Endpoints.Root)
.withAutomaticReconnect()
.configureLogging(LogLevel.Debug)
.onMessage <|
function
| Response.NewCount _ -> countOne()
)
I think in this situation it's probably better to just go ahead and wrap the entire function in the useCallbackRef
hook:
let render = React.functionComponent(fun () ->
let count,setCount = React.useState 0
let handleMsg =
React.useCallbackRef (fun msg ->
match msg with
| Response.NewCount i -> setCount (count + 1)
)
let hub =
React.useSignalR<Action,Response>(fun hub ->
hub.withUrl(Endpoints.Root)
.withAutomaticReconnect()
.configureLogging(LogLevel.Debug)
.onMessage(handleMsg))
An alternative solution:
let render = React.functionComponent(fun () ->
let count,setCount = React.useState 0
let otherCount,setOtherCount = React.useState 0
let hub =
React.useSignalR<Action,Response>(fun hub ->
hub.withUrl(Endpoints.Root)
.withAutomaticReconnect()
.configureLogging(LogLevel.Debug)
.onMessage <|
function
| Response.NewCount i -> setCount i
)
React.useEffect((fun () -> setOtherCount (count + 1)), [| count |])
I'm glad you brought this up, I should add this scenario to the documentation. Thanks!
from fable.signalr.
Thanks for explanation, I'll try that approach!
from fable.signalr.
Great example @Shmew , but how does the last one work?
from fable.signalr.
Whenever count
is updated (via onMessage
) the component will re-render, whenever the component re-renders and count
has changed React will execute the function passed via useEffect
setting otherCount
. It's a bit convoluted, but demonstrates a way to fire additional side-effects after onMessage
.
from fable.signalr.
Related Issues (20)
- Elmish example for server streaming HOT 1
- Split into bindings and a library HOT 1
- Latest Fable.SignalR.AspNetCore requires Fable.Remoting.MsgPack below 1.7 HOT 2
- Trouble getting regular Dotnet Client working HOT 10
- How to set "target" in message from client to server HOT 4
- Q: How do I send a message from a handler function? HOT 5
- Detecting initial connection (client side) HOT 2
- Q: Use with non-Fable/dotnet client? HOT 1
- Compile error: missing module http HOT 2
- Incorrect package minimum for dependency HOT 3
- Question: does client package assume the use of server package? HOT 2
- AddSignalR and UseSignalR overloads must match HOT 1
- Support cancellation of streams created with StreamFrom in .NET client HOT 4
- Allow server streaming implementations to detect cancellation
- 405 error with fable client
- Bump versions to work with ASP .NET Core 6 / .NET 6 HOT 1
- Dependency conflicts with Fable.Lit on Fable.Promise
- Question: How to register with Elmish and no server
- Fable.Elmish 4.0 support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable.signalr.