React Tips

React Tips

Stuff in this page is things I think are useful for react, but don't feel important enough for the main guide. Feel free to add to this if there's anything missing.

Class vs className

HTML components have a class attribute, used for CSS classes (and for us, Tailwind CSS).

In JavaScript, class is a reserved keyword.

Due to this, inside JSX, we must use className instead of class to change an attributes CSS class.

Conditional Rendering

A pretty common scenario is we want to render something conditionally, that is, check a condition and render something if its true, otherwise render something else. One frequent example of this may be when making a request from some API. While the data is loading, we want to render a progress bar. Once the data is received, we want to render the data in a nice table.

There are two ways we can do this, in a verbose format or a shorthand method.

Concise Method

Useful for rather simple conditional checks:

export const About: React.FC = () => {
  const { data, loading, error } = useQuery<Query>(gql`
    query {
      randomNumber
      ping
    }
  `);

  const [msg, setMsg] = useState("");

  useEffect(() => {
    if (loading || error || !data) {
      return;
    }
    setMsg(data.ping);
  }, [data]);

  return (
    <>
      {loading ? (
        <CircularProgress />
      ) : (
        <p>Your message is {msg}</p>
      )}
    </>
  );
};

We make a query to our server, which returns a loading variable and a data variable. Let's look at the return statement.

We use the ternary operator ( ? ) to concisely choose between two things to render. Basically, we are saying IF ( loading ) then RENDER THIS otherwise ( : ) RENDER THIS.

We aren't just limited to the ternary operator. We can use && to render something only if the clause on the left is true (i.e. { !loading && <Data /> } will only render Data if loading is false. Likewise || can also be used to render the RHS only if the first is false.

We aren't just limited to single operators. Since any JS is valid, we could check multiple things before rendering too:

{ condition1 && condition2 && condition3 && (<Components />) }

Remember though, since we are using normal JS here, we need to place these conditionals inside the curly braces.

💡 There really isn't anything special here, these operations (or at least the || and &&) work because of short-circuit evaluation. Since we put our react component second, it will only be rendered if the first clause can't determine the overall predicate (i.e. false for || and true for &&). For example, if the first clause in && is false, then there is no need to execute the second clause (your react component).

Verbose Method

The verbose method simply utilizes standard conditionals to achieve the same result:

export const About: React.FC = () => {
  const { data, loading, error } = useQuery<Query>(gql`
    query {
      randomNumber
      ping
    }
  `);

  const [msg, setMsg] = useState("");

  useEffect(() => {
    if (loading || error || !data) {
      return;
    }
    setMsg(data.ping);
  }, [data]);

  if (loading) {
    return <CircularProgress />;
  } else {
    return <p>Your message is {msg}</p>;
  }
};

Since components are just JavaScript functions, we can use any tools available in JavaScript in our functions.