| C:\code\sandbox>git clone https://github.com/dotnet/fsharp.git f1 | |
| Cloning into 'f1'... | |
| remote: Enumerating objects: 24, done. | |
| remote: Counting objects: 100% (24/24), done. | |
| remote: Compressing objects: 100% (17/17), done. | |
| remote: Total 111604 (delta 8), reused 7 (delta 7), pack-reused 111580 | |
| Receiving objects: 100% (111604/111604), 197.82 MiB | 1.67 MiB/s, done. | |
| Resolving deltas: 100% (82423/82423), done. | |
| Updating files: 100% (10001/10001), done. |
Normally, function components are rerendered every time the application renders. If you have large/complex components, this can affect application performance.
You can use React.memo, React.useCallback, and React.useMemo to memoize parts of your application. This means that React will cache and reuse their previous results instead of rerendering them.
Example:
We start with a useReducer-based Counter application, with the following additions:
| // F# HTML DSL alternate formatting examples | |
| // Notes: | |
| // Elements have only 1 list parameter, not 2. | |
| // A `prop.` prefix is used for props/attrs -- anything else is an element. | |
| // Example 1: Feliz style -- https://github.com/Zaid-Ajaj/Feliz | |
| // prop.* are the primary children, and elements are nested inside a prop.children [ ... ] sublist |