3nvi

// index.jsx
export default function ParentComponent(props) {
  return (
    <div>
      <SomeComponent someProp={props.somePropValue}
    <div>
      <AnotherComponent someOtherProp={props.someOtherPropValue} />
    </div>
   </div>
 )

3nvi

// Don't do this!
function Component(props) {
  return <AnotherComponent onChange={() => props.callback(props.id)} />  
}

// Do this instead :)
function Component(props) {
  const handleChange = useCallback(() => props.callback(props.id), [props.id]);
  return <AnotherComponent onChange={handleChange} />  
}

3nvi

// ./Tooltip.jsx
const MUITooltip = React.lazy(() => import('@material-ui/core/Tooltip'));
function Tooltip({ children, title }) {
  return (
    <React.Suspense fallback={children}>
      <MUITooltip title={title}>
        {children}
      </MUITooltip>
    </React.Suspense>
  );

3nvi

// Avoid this is the components are too "heavy" to mount/unmount
function Component(props) {
  const [view, setView] = useState('view1');
  return view === 'view1' ? <SomeComponent /> : <AnotherComponent />  
}

// Do this instead if you' re opting for speed & performance gains
const visibleStyles = { opacity: 1 };
const hiddenStyles = { opacity: 0 };
function Component(props) {

3nvi

// Don't do this!
function Component(props) {
  const aProp = { someProp: 'someValue' }
  return <AnotherComponent style={{ margin: 0 }} aProp={aProp} />  
}

// Do this instead :)
const styles = { margin: 0 };
function Component(props) {
  const aProp = { someProp: 'someValue' }

3nvi

// don't do this!
function Component(props) {
  const someProp = heavyCalculation(props.item);
  return <AnotherComponent someProp={someProp} /> 
}
  
// do this instead. Now `someProp` will be recalculated
// only when `props.item` changes
function Component(props) {
  const someProp = useMemo(() => heavyCalculation(props.item), [props.item]);

3nvi

// selectors.js
export const getItems = state => state.items;

// Component.jsx
import React from 'react';
import { connect } from 'react-redux';
import { getItems } from './selectors';

function MyComponent({ items }) {
  return <div>{items.length}</div> 

3nvi

// actions.js
export const fireAction = item => ({ type: 'ACTION', payload: { item } });

// Component.jsx
import React from 'react';
import { connect } from 'react-redux';
import { getItems } from './selectors';

function MyComponent({ item, fireActionWithItem }) {
  return <button onClick={fireActionWithItem}>{item}</button>

3nvi

// actions.js
export const fireAction = item => ({ type: 'ACTION', payload: { item } });



// ExpensiveComponent.jsx
import React, { memo } from 'react';

function ExpensiveComponent({ onClick }) {
  return (

3nvi

// action.js
const fireAction = item => ({ type: 'ACTION', payload: { item } });

// Option 1
import React, { useCallback } from 'react';
import { connect } from 'react-redux';
import { getItems } from './selectors';
function MyComponent({ item, fireAction, randomProp }) {
  const fireActionWithItem = useCallback(() => fireAction(item), [item]);
  return (