isacjunior

// componentDidMount com class
import React, { Component } from 'react'

class DidMount extends Component {
  componentDidMount() {
    console.log('Eu estou montado')
  }
  render() {
    return <>content</>
  }

isacjunior

import React, { useState } from 'react'

interface Props {
  initialCount: number
}

function CounterHooks ({ initialCount }: Props) {
  const [count, setCount] = useState(initialCount)
  const increment = () => setCount(count + 1)
  return <button onClick={increment}>{count}</button>

isacjunior

import React, { Component } from 'react'

interface Props {
  initialCount: number
}

interface State {
  count: number
}

isacjunior

import React, { Component } from 'react'
import { Platform, Text, View, NativeModules } from 'react-native'
import styles from './styles'
import I18n from 'i18n-js'

function getLanguageByDevice() {
  return Platform.OS === 'ios'
    ? NativeModules.SettingsManager.settings.AppleLocale
    : NativeModules.I18nManager.localeIdentifier
}

isacjunior

// Counter Component
import React, { useReducer, createContext } from 'react'
import reducer, { initialState, actions } from './reducer'

const CounterContext = createContext()

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)
  const { increment, decrement, reset } = actions(dispatch)

isacjunior

import React, { memo } from 'react'

const Hello = ({ name }) => <h1>Hello {name}</h1>

const areEqual = (prevProps, nextProps) => prevProps.name === nextProps.name

export default memo(Hello, areEqual)

isacjunior

import React, { memo } from 'react'

const Hello = ({ name }) => <h1>Hello {name}</h1>

export default memo(Hello)

isacjunior

import React, { memo } from 'react'

const MyComponent = memo(props => {
  /* render usando props */
});

isacjunior

import React, { Suspense, lazy } from 'react'

function LazyImport(Component) {
  const ComponentLoadable = lazy(Component)
  return props => (
    <Suspense fallback={<div>Loading...</div>}>
      <ComponentLoadable {...props} />
    </Suspense>
  );
}

isacjunior

import React, { PureComponent } from 'react'
import { Animated } from 'react-native'

class SlideLeft extends PureComponent {
  state = {
    left: new Animated.Value(300),
    // Precisamos mapear o valor a ser manipulado, no meu caso, coloquei no estado, tendo o valor inicial como 300.
  }

  componentDidMount() {