React Implementation Notes
facebook.github.io
React Implementation Notes
1–10 of 93 posts
Re: React Implementation Notes
#2I'm wondering about something. Let's say I have a listbox with N elements, and one element is appended or changes state. Will the reconciler have to perform O(N) work for these operations?
If elements are added one by one, will the reconciler have performed O(N^2) operations by the time the last element was added?
Re: React Implementation Notes
#3I'm wondering about something. Let's say I have a listbox with N elements, and one element is appended or changes state. Will the reconciler have to perform O(N) work for these operations? If elements are added one by one, will the reconciler have performed O(N^2) operations by the time the last element was added?
1. If a component changes state and its parent doesn't, then the other children aren't considered so it would be O(1). If the parent rerenders, then yes, we would consider each child and it would take O(n).
2. Yes, it would. You would really have to go out of your way to make that happen, though. React has a feature for batching state updates together to prevent unnecessary rerenders if all of the updates occur together. Beyond that, it's rarely an issue.
If you have a particularly long list you can use a tool like react-virtualized (https://github.com/bvaughn/react-virtualized) so that only the onscreen rows are rendered at all.
Re: React Implementation Notes
#4Awesome that these implementation notes are so simple and laid out over just a few pages. Speaks to the conceptually simple underlying model of React I think. Nice job.
Re: React Implementation Notes
#5I'm wondering about something. Let's say I have a listbox with N elements, and one element is appended or changes state. Will the reconciler have to perform O(N) work for these operations? If elements are added one by one, will the reconciler have performed O(N^2) operations by the time the last element was added?
1. If a component changes state and its parent doesn't, then the other children aren't considered so it would be O(1). If the parent rerenders, then yes, we would consider each child and it would take O(n). 2. Yes, it would. You would really have to go out of your way to make that happen, though. React has a feature for batching state updates together to prevent unnecessary rerenders if all of the updates occur toget…
> You would really have to go out of your way to make that happen, though. React has a feature for batching state updates together to prevent unnecessary rerenders if all of the updates occur together.
These batched state updates only happen "within React's walls", right?
So for example, say you had an RxJs observable that omitted a list of items to display. When you first subscribe, it emits say, ten items, one by one, but all in the same browser tick. It may emit items later in the future as well.
In this case, each of the initial emitted items triggers a full rerender and you get the O(N^2) behavior, correct? My point here isn't that this is the end of the world, but just that it isn't that crazy to say that it might happen.
Re: React Implementation Notes
#6Earlier quoted context omitted.
1. If a component changes state and its parent doesn't, then the other children aren't considered so it would be O(1). If the parent rerenders, then yes, we would consider each child and it would take O(n). 2. Yes, it would. You would really have to go out of your way to make that happen, though. React has a feature for batching state updates together to prevent unnecessary rerenders if all of the updates occur toget…
> You would really have to go out of your way to make that happen, though. React has a feature for batching state updates together to prevent unnecessary rerenders if all of the updates occur together. These batched state updates only happen "within React's walls", right? So for example, say you had an RxJs observable that omitted a list of items to display. When you first subscribe, it emits say, ten items, one by o…
Yes, you're generally correct. If you can call into ReactDOM.unstable_batchedUpdates at the top of the stack, that's another approach. We might be able to make that the default in the future so synchronous calls are always grouped even if React isn't on the stack.
We generally see the most success when you update your data wholesale with the latest copy from your stores, but your RxJS example is a good one.
Re: React Implementation Notes
#7I'm wondering about something. Let's say I have a listbox with N elements, and one element is appended or changes state. Will the reconciler have to perform O(N) work for these operations? If elements are added one by one, will the reconciler have performed O(N^2) operations by the time the last element was added?
[deleted]
Re: React Implementation Notes
#8I really appreciate getting an inside look at complex code like React.
Re: React Implementation Notes
#9Building React From Scratch:
Re: React Implementation Notes
#10Bravo to the React team for the work during the last few months! It's truly amazing, specially for the new users.
Among other things:
1) Create-React-App[1]: Lets everyone starts a React app with Babel/Webpack (JSX, classes and import/export) without any knowledge about Babel/Webpack.
2) The new Contributing docs (Codebase Overview, Implementation Notes (discussed here) and Design Principles) offer a starting point to figure out how React works.
3) A revamp of the current documentation is going to be released soon[2]
4) "You might not need Redux"[3]
---
[1] https://github.com/facebookincubator/create-react-app
[2] https://github.com/facebook/react/pulls?q=is%3Apr+is%3Aopen+...
[3] https://medium.com/@dan_abramov/you-might-not-need-redux-be4...