question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add lazyComp for easy non-rerendered component

See original GitHub issue

Similarly to Fable.React’s lazyView, we should have a function to easily create a component whose view function doesn’t need to be called if the model hasn’t changed. Currently this requires creating a Component class.

Proposed API mirroring Fable’s:

val lazyComp
     : viewFunction: ('model -> Node)
    -> 'model -> Node
    when 'model : equality

val lazyCompWith
     : equal: ('model -> 'model -> bool)
    -> viewFunction: ('model -> Node)
    -> 'model -> Node

val lazyComp2
     : viewFunction: ('model -> Dispatch<'msg> -> Node)
    -> 'model -> Dispatch<'msg> -> Node
    when 'model : equality

val lazyComp2With
     : equal: ('model -> 'model -> bool)
    -> viewFunction: ('model -> Dispatch<'msg> -> Node)
    -> 'model -> Dispatch<'msg> -> Node

val lazyComp3
     : viewFunction: ('model1 -> 'model2 -> Dispatch<'msg> -> Node)
    -> 'model1 -> 'model2 -> Dispatch<'msg> -> Node
    when 'model1 : equality and 'model2 : equality

val lazyComp3With
     : equal: (('model1 * 'model2) -> ('model1 * 'model2) -> bool)
    -> viewFunction: ('model1 -> 'model2 -> Dispatch<'msg> -> Node)
    -> 'model1 -> 'model2 -> Dispatch<'msg> -> Node

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:13 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
Tarmilcommented, Dec 7, 2019

I was thinking we can simply have a single Component type for all lazy views, which receives the view function as a [<Parameter>]. It can even simply inherit from ElmishComponent, which already has everything needed besides this parameter.

0reactions
brikkencommented, Dec 16, 2019

@Tarmil Thank you for the feedback. I’ve made changes accordingly, added the last two signatures, added an additional example showcasing custom equality, and created a pull request with all the changes.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Lazy loading React components
React.lazy() makes it easy to create components that are loaded using dynamic import() but rendered like regular components.
Read more >
Lazy Loading React Components (with react.lazy and suspense)
Lazy loading is the technique of rendering only-needed or critical user interface items first, then quietly unrolling the non-critical items later. It is...
Read more >
Complete Guide to React Lazy Loading and Code Splitting
Learn how to optimize your app with a complete guide to React lazy loading and code splitting with coding examples, tips, videos, and...
Read more >
Lazy loading in React | LoginRadius Blog
js")); const Admin = lazyLoader(() => import("./Admin.js")); //Instead of regular import statements, we will use the above approach for lazy loading ...
Read more >
Lazy load components in react - javascript
1 Answer 1 ; import { Suspense · from ; 'react'; const HeavyComp = ; lazy(() => import( ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found