Google Trends confirmed React tops the search volume at 57.5%.
A few websites that use ReactJS? Facebook. Netflix. Shopify.
If these giants chose ReactJS, why shouldn’t you? I know what you will say to yourself now.
“I need ReactJS developers for hire.”
However, before you do so, allow me a moment. In the next five minutes, learn all about the ten expert ReactJS tips you must know for your next web development project.
In this article, you will learn:
- How to use Higher-order components
- How to employ container and presentational components
- How to separate components with portals
- How to introduce error boundaries
- How to use React-specific linting
- And more
1. Use Higher-order components (HOCs)
Higher-order components take other functions as arguments and impart behaviours onto them.
Why is it important? Components share functionality with each other. The functionality includes network requests and logging. However, when the number using the same logic increases, sharing gets difficult. Higher-order components solve the issue.
In the example above:
- The function converts into a new wrapped component.
- The process renders the original one which is passed in along with other props.
- Afterwards, the function wraps the original on export. The function uses Higher-order components to make commonly used chunks of code easier to test and maintain.
- Later on, when the framework needs specific functionality, they are easy to drop in. Furthermore, you can be sure the functionality will behave as you expect it to.
2. Employ container and presentational components
While you develop different parts of an application, you must keep a separation of concerns. Doing so:
- Renders the overall system easier to maintain
- Makes the system more stable
- Allows you to reuse components in other systems or within different contexts within the same system
- Makes it easier to conduct unit test
ReactJS uses container and presentational components. Here is an example:
An external method inside the container fetches the products. Afterwards, the external method holds the products within their own store and then passes the products as props to the presentational components.
However, the container component cannot display the information. The container component can only fetch and adjust the information. The presentational component does not know where the data comes from.
3. Separate components with portals
A component must break out of its parent to be in other places in the DOM. For example, Modal windows must stay at the top half of the page to avoid issues with positioning and z-index.
ReactJS employs portals to render components into DOM nodes. The components stay completely separate from the rest of the application. Thus, the contents still hold their place in the framework’s structure but render somewhere else. The process allows any triggered event inside the portal to bubble up through the React portal.
You can return the portal using the render function creating a dedicated component. When you need to display the content, wrap the content in the component and display it in the other element.
4. Introduce error boundaries
Errors can be hard to diagnose and unstable the entire application. ReactJS solved the issue with error boundaries.
- When ReactJS detects an error within a component, the framework compels the error to bubble up through its parents till it hits the root of the application. Afterwards, the framework unmounts the error.
- Alternatively, the framework compels the error to find the component which will handle the error.
Error boundaries store the error in state and replace the child contents by hooking a new lifecycle method. The process ring-fences the part of the application from the rest.
Error boundaries work like try/catch blocks. Furthermore, you can nest boundaries inside one another with ease. However, any errors that occur get caught by the next boundary up.
5. Use React-specific linting
Linter tools keep the code clean. How? Linter tools define a set of rules for the codes to follow. Furthermore, the tool highlights anywhere the code has not followed the rules. Each code must pass through the rules to merge into the codebase. Thus, code quality increases and you can maintain projects with ease.
ESLint is a popular linter for ReactJS projects. The linter checks things including keys in iterators to a complete set of prop types. Furthermore, you can enable more options on specific projects. All you need to do is update the .eslintrc config file.
Furthermore, another popular plugin is eslint-plugin-jsx-a11y. The plugin fixes common issues with accessibility. Furthermore, the plugin solves React-specific issues such as assigning aria props with different syntax.
6. Use CSS with styled-components
Style an application with reusable components and you can face issues with clashing class names. But conventions such as BEM helps mitigate the issue, right? Not quite. The conventions treat symptoms rather than the issue.
The styled-components offer the perfect solution. The components adjust visuals on the fly without class toggles or inline styles. Here is how the styled-components do so:
- The components create new ready-styled components instead of creating class names.
- Furthermore, the system uses ES2015 tagged template literals. The template literals accept regular CSS and apply the same to the requested element.
- You can alter the style dynamically using a placeholder.
7. Employ code splitting
If you never employ code splitting, each component of the application gets bundled into one file, making it difficult to manage. Use tools such as Webpack to split the bundle up into smaller and manageable chunks you can later request.
The React-loadable package enables a component to decide when it needs to render. Afterwards, Webpack splits up the component’s bundle to accommodate the same on its own.
With Loadable, you can:
- Dynamically import anything the component needs.
- Use the LoadableButton as a regular component.
If you are dealing with a large application with routing, split by route instead of components. Pull common paths with one request and the speed will increase further.
However, maintain a balance between the number of bundles and their overall size.
8. Apply Snapshot testing with Jest
When you write lots of small components, the tests take longer to code than the component itself. You must check the process to make sure nothing has changed.
The solution? Jest — a testing framework by Facebook.
The framework allows you to capture the view of a component at any given time and compare the view against any changes in the future. Furthermore, Jest flags each change for either acceptance or rejection. When you can see exactly what changed, it becomes easy to debug.
When the test runs, Jest:
- Converts the view to JSON. Afterwards, the framework stores the JSON in a special directory that is committed to source control.
- When the test runs next, Jest checks the file and flags up any differences. If the change is a deliberate one, Jest replaces the snapshot and the test passes.
9. Apply reusability
Never create a new component for a function when another component is already present for that function. Instead, reuse the component across the project or across several projects. You will receive consistency. Furthermore, you will contribute to the ReactJS community as well.
If you think any specific component has become huge and is becoming difficult to maintain, break it up into smaller components. For example:
- Create a Button component with the capability to handle icons.
- Afterwards, each time you need a button, you can use the component.
- Thus, the resulting component will be smaller and easier to maintain.
10. Employ server rendering
Large applications can cause users to look at a blank screen while the site loads. If that happens, you risk losing visitors to your site.
The solution? Server rendering. Render the initial view on the server and the perceived load time reduces.
ReactJS already handles rendering on Node servers. Furthermore, the framework uses a special version of the DOM renderer which follows the same pattern on the client-side.
The process outputs the regular HTML as a string. Afterwards, the string is placed inside a page body as part of the server response. On the client-side, ReactJS spots the pre-rendered content and picks up where the framework left off.
ReactJS will continue to dominate the web
Thus, knowing these 10 expert tips will help you to get more out of the framework. In this article, you learnt:
- Why is it important to use a Higher-order component
- Why should you employ container and presentational components
- Why separate components with portals
- Why introduce error boundaries
- Why use React-specific linting
- And much more
I hope this guide helped you learn something new.
