BethanyDrake

'use client'
const UpdateProfileForm = () => {
  const changeDisplayName = () => {
    updateProfile({ displayName: 'My New Name'})
  }
  return (<button onClick={changeDisplayName}/>)
}

BethanyDrake

'use server'

const ExamplePage = async () => {
  const initialData = await fetchData()
  
  ...
}

BethanyDrake

const UpdateProfileForm = () => {
  const changeDisplayName = () => {
    axios.post('/profile', {
        displayName: 'My New Name',
    })
  }
  return (<button onClick={changeDisplayName}/>)
}

BethanyDrake

export const ExamplePage = ({initialData}) => {
    ...
}

ExamplePage.getInitialProps = async () => {
    return {
        initialData: await fetchData()
    }
}

BethanyDrake

export const ExampleComponent = () => {
    const [isLoadinging, setIsLoading] = useState(true)
    const [data, setData] = useState()
    useEffect(() => {
        fetchData().then((response) => {
            setData(response)
            setIsLoading(false)
        })
    }, [])
}

BethanyDrake

const ComponentC = () => {
  return <ComponentA data-test-id="component-a" someProp="Goodbye?" />;
};

BethanyDrake

const ComponentA = ({ someProp }) => {
  return <div>{someProp}</div>;
};

export const ComponentB = () => {
  return <ComponentA someProp="Hello!" />;
};