Organizing the React render method

-

One common way to organize React render methods is to split the returned JSX into several smaller pieces, which are then assembled in the final JSX before returning. This makes the overall structure of the render function easier to understand. Note that the objective isn't to obtain JSX fragments we can reuse elsewhere, we just want our JSX to be split into bite-size, one-off sections that have a clear function in the component markup.

Now, look at the two examples of a simple render method below. Which one would you use?



Both approaches yield the same result and you would be tempted to use stateless components here, as the resulting all-JSX return statement looks better. But using stateless components defined inside your render method is a big no-no. Why? Because they will be re-rendered to the DOM from scratch every time the parent container renders.

Keep in mind how reconciliation works. It will traverse your JSX tree, adding and removing nodes as needed. If a component instance stays the same, its render method will generate some jsx which will be compared to the old jsx to figure what changes to the DOM are needed. And here is the problem: since we are defining the component inside the render method, it will in effect be a new component every time render is invoked. This means the DOM for its previous instance will be discarded and replaced by a new (potentially identical..) DOM tree. This can be a significant performance hit, and it defeats the entire purpose of reconciliation.

TL;DR: do not define stateless react components inside the render method of another component.

Comments

Post a Comment

Popular posts from this blog

Parallel Beam Tracing and Visualization of 200 Million Sonar Points

-
Image
For the final project in the UIC Spring 2013 Parallel Processing Class, I worked with a classmate to optimize our current implementation of a sonar beam tracer used for  The NASA ENDURANCE Project . The beam tracer is used to process the raw data collected by the ENDURANCE AUV in Lake Bonney, Antarctica, and correct sound beam paths using information about the water chemistry. The data is clustered and noise filtered to generate a final 3D Point cloud that can be visualized in our CAVE2 system. The ENDURANCE Sonar data in CAVE2. Photo(c) Lance Long. A lot of corrections and adjustments need to be applied to this data before the final results are acceptable. Some of the corrections derive from the sound speed estimation through the water column, AUV navigation corrections, water level changes and noise filtering thresholds. All this parameters influence the final result, and ideally researchers can tweak them and see the result of their actions in real time. Given the size of
Read more

Parallel Gaussian Elimination Using MPI

-
Image
In this project, we had to implement a parallel solver for linear equation systems, using a technique known as Gaussian elimination (GE). As with many other algorithms for solving linear equation systems, GE is performed on the matrix representation of the system, Ax = b, where A is the coefficient matrix and b is the vector of known values. GE works by applying a set of elementary row operations (swapping rows, multiplying a row by a non-zero number, adding a multiple of one row to another) in order to turn the coefficient matrix into upper triangular form. The algorithm has been implemented in C, using the Message Passing Interface (MPI) API. The parallel GE program measured execution times for its four main components: data distribution, Forward Elimination , Pivot row identification, Back substitution. Read the full report here
Read more

Flickering 2D transform elements in Chrome: a simple fix

-
This quick post is to point out a fix to an issue I had to deal with a few weeks ago and was caused by a Chrome update. Components with absolute positioning and a 2D CSS transform started flickering when placed inside a scrollable component. A brief search online revealed several people with similar problems, but the suggested fixes were all very different. I tested several of them (including obvious changes to the z order) before finding the one that actually did the trick. What eventually worked for me was adding an empty 3D transform to the same elements with 2D transforms: transform:translate3d(0,0,0); I guess the reason why this works is that it forces elements to be drawn via a different rendering / compositing path than standard 2D elements.
Read more