Select Page

Category: beginning react

React 16.6.0 Goodies

React 16.6.0 was released October 2018 and with it came goodies that spice up the way we can develop with React. We’re going to cover what I consider the best of those new goodies with examples of how we can put them to use in our work. React.memo() avoids unnecessary re-rendering There are situations where a component re-renders, even if neither its state nor its props changed. That adds up and can be an expensive operation. Here’s an example of a counter to show what we’re talking about: See the Pen React counter w/o React.memo() by CSS-Tricks (@css-tricks) on...

Read More

Using React Portals to Render Children Outside the DOM Hierarchy

Say we need to render a child element into a React application. Easy right? That child is mounted to the nearest DOM element and rendered inside of it as a result. render() { return ( // Child to render inside of the div ); } But! What if we want to render that child outside of the div somewhere else? That could be tricky because it breaks the convention that a component needs to render as a new element and follow a parent-child hierarchy. The parent wants to go where its child goes. That’s where React Portals come in....

Read More

Compound Components in React Using the Context API

Compound components in React allow you to create components with some form of connected state that’s managed amongst themselves. A good example is the Form component in Semantic UI React. To see how we can implement compound components in a real-life React application, we’ll build a compound (multi-part) form for login and sign up. The state will be saved in the form component and we’ll put React’s Context AP to use to pass that state and the method from the Context Provider to the component that needs them. The component that needs them? It will become a subscriber to...

Read More

An Overview of Render Props in React

An Overview of Render Props in React Using render props in React is a technique for efficiently re-using code. According to the React documentation, “a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.” To understand what that means, let’s take a look at the render props pattern and then apply it to a couple of light examples. The render props pattern In working with render props, you pass a render function to a component that, in turn, returns a React element. This render function...

Read More