Some Commonly used React Patterns?

Some Commonly used React Patterns?

These are some of the commonly used react patterns:


  • Elements are anything inside angle brackets.
<App />
  • Components return elements.


  • These are nothing but functions which return a React Element
function App(){
    return  <h1> Hello World!!!</h1>


  • use curly braces to embed expression in JSX
function Greeting() {
  let name = "sridhar";

  return <div>Hi {name}!</div>;


  • Specify default values for props with defaultProps.
function App(props) {
  return <div>Hi {}!</div>;
App.defaultProps = {
  name: "Guest"

5.Destructuring Props

  • Destructuring is an ES6 feature which will be used commonly in react used to destructure objects and arrays.
let person = { name: "sridhar"}
let { name} = person
  • Similarly, we can destructure Arrays
let things = ["one", "two"];
let [first, second] = things;
  • Destructuring is used a lot in functional components. These component declarations are as below
function Greeting(props) {
  return <div>Hi {}!</div>;

function Greeting({ name }) {
  return <div>Hi {name}!</div>;
  • There's is a syntax for collecting props into an object. It is react parameter syntax and it looks like this
function Greeting({ name, ...restProps }) {
  return <div>Hi {name}!</div>;
  • Those three dots (...) take all the remaining properties and assign them to the object restProps.

6.Conditional rendering

  • You can't use if/else statements inside component declarations. So conditional (ternary) operator and short-circuit evaluation are your friends.


  condition && <span>Rendered when `truthy`</span>;


  condition || <span>Rendered when `falsy`</span>;


  condition ? (
    <span>Rendered when `truthy`</span>
  ) : (
    <span>Rendered when `falsy`</span>

If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter @ksridhar02.