React Tips and Tricks You May Have Missed

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps. In this article, we’ll look at some tips and tricks to make building apps with React easier.

Use React Hooks In Functional Components

Hooks make React function components smart. Without hooks, all we can use function components to display data. That’s why they were also called stateless components. With hooks, they have their own internal state and methods, which make them much more useful.

For instance, we can write components with hooks as follows:

import React from "react";

export default function App() {  
  const [count, setCount] = React.useState(0);  
  return (  
    <div className="App">  
      <button onClick={() => setCount(count + 1)}>Increment</button>  
      <p>{count}</p>  
    </div>  
  );  
}

In the code above, we have the built-in React useState hook which lets us change the count state with the setCount function.

We call setCount with an argument to update the value as we did with the onClick handler.

It looks simple. We don’t have to reference this as we do with class components, so we don’t have call bind to set the right this as we do with class components.

It’s just much cleaner to work with. We can also write our own hooks to update data our way.

Function components don’t have access to lifecycle methods, so this is the way to make smart function components.

Use The React Context API For Passing Props

The React context API lets us pass data between unrelated components. With function components we can use the createContext method to create a context. We can use the returned component to wrap around our components which we want to share data between.

Then we can pass any data that we want between them. The communication is still one way. Data is passed from context provider to consumer.

For instance, we can write the following code to pass data between them:

import React from "react";  
const CountContext = React.createContext(0);


function Count() {  
  const count = React.useContext(CountContext);  
  return <p>{count}</p>;  
}

export default function App() {  
  const [count, setCount] = React.useState(0);  
  return (  
    <CountContext.Provider value={count}>  
      <div className="App">  
        <button onClick={() => setCount(count + 1)}>Increment</button>  
        <Count />  
      </div>  
    </CountContext.Provider>  
  );  
}

In the code above, we created a React with React.createContext so that we can share data with the Count component.

We use the CountContext.Provider component to wrap it around everything. Then we pass in the count variable into as the value of the value prop, which will share it with any component that calls React.useContext and is inside the CountContext.Provider component.

Then in Count , we call React.useContext with our CountContext passed in. Therefore, the count will be passed from App in Count via the value prop and rendered in Count .

Therefore, when we click the Increment, then the count value will increase.

Styled Components

One benefit of using React is it’s very easy to set CSS values in JS. Therefore, it’s very easy to make styled-components with CSS inside components, making them self contained.

We can use the style-components library to make styled-components easily. It comes with template tags that turns CSS strings we pass in into a component.

For instance, we can write the following:

import React from "react";  
import styled from "styled-components";

const Div = styled.div`  
  background: ${props => (props.primary ? "green" : "white")};  
  color: ${props => props.color};margin: 1em;  
  padding: 0.25em 1em;  
  border: 2px solid green;  
`;

export default function App() {  
  return (  
    <div className="App">  
      <Div background="green" color="white" primary={true}>  
        foo  
      </Div>  
    </div>  
  );  
}

In the code above, we have the props in the template string, which are props that we pass in when we use the component. style.div is a template tag. Template tags are functions that take in a template string and return some objects on our choice.

In this case, we return a styled component. style.div returns a div with the types that we hard code or set according to props.

Then when we reference Div in App , we’ll see a green box with white text as we specified with the color prop. Since we specified that the value of the primary prop is true , style-component will set the background color to green.

Conclusion

The hooks API makes React components cleaner and easier to understand. It lets us make function components smart. We also don’t have to worry about the value of this or lifecycle hooks any more.

The context API is useful for sharing data between 2 components, regardless of their relationship. We can use the useContext hook to do the sharing.

Finally, the styled-components library comes with template tags to let us make styled-components with ease.