⚠️ This article was posted over a year go. The information might be outdated. ⚠️

Adding Custom Environment Variables

Note: this feature is available with react-scripts@0.5.0 and higher.

To define permanent environment variables, create a file called .env in the root of your project:

REACT_APP_NOT_SECRET_CODE=abcdef

Note: You must create custom environment variables beginning with REACTAPP.

Adding Custom Environment Variables

Add the second arg to useEffect

const [todos, updateTodos] = useState([])
// Only execute on mount
useEffect(() => {
  window.localStorage.setItem(‘todos’, JSON.stringify(todos))
}, [])

// Execute when there’s been a change in our todos list (componentDidUpdate):
useEffect(() => {
  window.localStorage.setItem(‘todos’, JSON.stringify(todos))
}, [todos])

// Execute clean up function on unmount
useEffect(() => {
  return () => { console.log(‘Clean up function’) }
}, [])

useEffect Explained

Write types in filename.d.ts

When you are creating an app with React in TypeScript, Write all the types you use in the app in .d.ts file.

interface AccessToken {
  'access-token': string
  client: string
  uid: string
}

Follow ECSS methodology

Structure your directory like the example below:

- Component
  - view.jsx
  - logic.ts
  - design.css

You can put all the functionalities, logics and designs you need for a component into one directory.

Architect CSS and scale CSS with the ECSS CSS methodology

Use utilities for shared logic

Create utilities.ts/js to store functions used in multiple files.

onClick - pass event as a parameter

You can pass the event as a parameter like the code below.

<button
  onClick={e => {
    func(e, someParameter)
  }}
>
  Click Me!
</button>

React onClick - pass event with parameter

How to skip first run in useEffect

You can do so using useRef like the code below.

const { useState, useRef, useEffect } = React

function MyComponent() {
  const [count, setCount] = useState(0)

  const isFirstRun = useRef(true)
  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false
      return
    }

    console.log('Effect was run')
  })

  return (
    <div>
      <p>Clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        Click Me
      </button>
    </div>
  )
}

ReactDOM.render(<MyComponent />, document.getElementById('app'))

skip first run in useEffect

React tips

Table of Contents