React Component Definition (Advanced)

How to define react components using advanced technics

How to define react components using advanced technics

The following refactoring recommendations are optional to explain the different JavaScript/React

patterns. You can build complete React applications without these advanced patterns, so don’t be discouraged if they seem too complicated.

JavaScript has multiple ways to declare functions. So far, we have used the function statement, though arrow functions can be used more concisely:

// function declaration
function () { ... }
// arrow function declaration
const () => { ... }

You can remove the parentheses in an arrow function expression if it has only one argument, but multiple arguments require parentheses:

// allowed
const item => { ... }

// allowed (recommended)
const (item) => { ... }

// not allowed
const item, index => { ... }

// allowed (recommended)
const (item, index) => { ... }

Defining React function components with arrow functions makes them more concise:

const App = () => {
  return (
    <div>
      ...
    </div>
  );
  };

const Search = () => {
  return (
    <div>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" />
    </div>
    );
};
const List = () => {
  return (
    <ul>
      ...
    </ul>
  );
};

This also holds true for other functions, like the one we used in our JavaScript array’s map method:

const List = () => {
  return (
    <ul>
      {list.map((item) => {
        return (
          <li key={item.objectID}>
            <span>
              <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>{item.num_comments}</span>
            <span>{item.points}</span>
          </li>
        );
      })}
    </ul>
  );
};

If an arrow function’s only purpose is to return a value and it doesn’t have any business logic in between, you can remove the block body (curly braces) of the function. In a concise body, an implicit return statement is attached, so you can remove the return statement:

// with block body
const countPlusOne = (count) => {
  // perform any task in between
  return count + 1;
};
// with concise body
const countPlusOne = (count) =>
  count + 1;
// with concise body as one line
const countPlusOne = (count) => count + 1;

This can be done for the App, List, and Search components as well, because they only return JSX and don’t perform any task in between. Again it also applies to the arrow function that’s used in the map function:

const App = () => (
  <div>
    ...
  </div>
);

const Search = () => (
  <div>
    <label htmlFor="search">Search: </label>
    <input id="search" type="text" />
  </div>
);

const List = () => (
  <ul>
    {list.map((item) => (
      <li key={item.objectID}>
        <span>
          <a href={item.url}>{item.title}</a>
        </span>
        <span>{item.author}</span>
        <span>{item.num_comments}</span>
        <span>{item.points}</span>
      </li>
    ))}
  </ul>
);

Our JSX is more concise now, as it omits the function statement, the curly braces, and the return statement.

However, remember this is an optional step, and that it’s acceptable to use normal functions instead of arrow functions and block bodies with curly braces for arrow functions over implicit returns.

Sometimes block bodies will be necessary to introduce more business logic between function signature and return statement:

const App = () => {
  // perform any task in between
  return (
    <div>
      ...
    </div>
  );
};

Happy coding !!

React Component Definition (Advanced) was originally published in Javarevisited on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More

Related Posts