Tutorial - Person Name with useState

This tutorial shows tiny example code with useState.

src/App.js

import React from 'react';
import { Provider } from './store';
import EditPerson from './EditPerson';
import ShowPerson from './ShowPerson';
const App = () => (
<Provider>
<EditPerson />
<ShowPerson />
</Provider>
);
export default App;

This is the root component.

src/store.js

import { useState } from 'react';
import { createContainer } from 'react-tracked';
const useValue = () => useState({});
export const {
Provider,
useTrackedState,
useUpdate: useSetState,
} = createContainer(useValue);

The store is created by useState. useUpdate is renamed to useSetState for exporting.

src/EditPerson.js

import React from 'react';
import { useSetState, useTrackedState } from './store';
const EditPerson = () => {
const setState = useSetState();
const state = useTrackedState();
const setFirstName = e => {
const firstName = e.target.value;
setState(prev => ({ ...prev, firstName }));
};
const setLastName = e => {
const lastName = e.target.value;
setState(prev => ({ ...prev, lastName }));
};
return (
<div>
<div>
First Name:
<input value={state.firstName || ''} onChange={setFirstName} />
</div>
<div>
Last Name:
<input value={state.lastName || ''} onChange={setLastName} />
</div>
</div>
);
};
export default EditPerson;

This component is to edit person object.

src/ShowPerson.js

import React, { useState } from 'react';
import { useTrackedState } from './store';
import { useFlasher } from './utils';
const ShowPerson = () => {
const state = useTrackedState();
const [onlyFirstName, setOnlyFirstName] = useState(false);
return (
<div ref={useFlasher()}>
<button type="button" onClick={() => setOnlyFirstName(s => !s)}>
{onlyFirstName ? 'Showing only first name' : 'Showing full name'}
</button>
{onlyFirstName ? (
<div>First Name: {state.firstName}</div>
) : (
<div>
Full Name: {state.firstName} {state.lastName}
</div>
)}
</div>
);
};
export default ShowPerson;

This is the ShowPerson component. It shows only first name or full name.

src/utils.js

import { useRef, useEffect } from 'react';
export const useFlasher = () => {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
ref.current.setAttribute(
'style',
'box-shadow: 0 0 2px 1px red; transition: box-shadow 100ms ease-out;',
);
setTimeout(() => {
if (!ref.current) return;
ref.current.setAttribute('style', '');
}, 300);
});
return ref;
};

This is a utility function to show which components render.

CodeSandbox

You can try working example.