--- title: Create Page in React published: true description: Page in React tags: #react, #reactpage #react-architecture --- ## Page Page can be defined as a Container of the modules. Page is the closest common ancestor for its modules (container children). One of the important technique when creating a page is [Lifting State Up](https://reactjs.org/docs/lifting-state-up.html). And the reason why we are not using Context API in the Page is because we want to limit the re-rendering on the page level. > When the nearest above the component updates, this Hook (useContext) will trigger a rerender with the latest context value passed to that MyContext provider. (React docs) [You can refer the "Create Module in React" article here](https://dev.to/aziziyazit/create-module-in-react-5gg) ### Page as closest common ancestor of moduleA and moduleB ~~~jsx function PageA() { const [stateA, setStateA] = useState('') const [stateB, setStateB] = useState('') return (

) } ~~~ ### moduleA ~~~jsx function moduleA(props) { const { setStateA, stateB } = props const moduleAContextValue = {setStateA, stateB} return ( ) } ~~~ ### moduleB ~~~jsx function moduleB(props) { const { setStateB, stateA } = props const moduleBContextValue = {setStateB, stateA} return ( ) } ~~~ ### component might look like this ~~~jsx function componentA1() { const moduleAContext = useContext(ModuleAContext) const { stateB, setStateA } = moduleAContext function handleClick() { setStateA('state A') } return (

{stateB} ) } ~~~ The Page state and Module context can be illustrated like below: ![](https://thepracticaldev.s3.amazonaws.com/i/g0iesl40ah2gvsr7e0if.png) > Page manage the communication between modules using technique called Lifting state up. While Module manage the communication between components using Context API (createContext & useContext) and useReducer. ### next series On the next article, we will discuss on managing communication between pages and the "page communication manager" is either Redux, Router or [Custom Hook](https://github.com/dai-shi/reactive-react-redux). ### code All the code sample can be viewed here [Codesandbox](https://codesandbox.io/s/react-architecture-c1rx2?fontsize=14)

reactpage

Create Page in React

Join Our Newsletter. No Spam, Only the good stuff.