React30-Project21: Building a Text-Only Social Media Website with useMemo in React
Introduction:
In a digital landscape dominated by multimedia, the simplicity of a text-only social media platform offers a unique user experience. In this comprehensive guide, we’ll explore the process of building a text-only social media website using React. To optimize performance, we’ll leverage the useMemo hook for efficient memoization of data.
Goals:
Build a text only social media website and utilise `useMemo` to memoize data. Build UI as shown below 👇
Explanation of useMemo hook
For beginners
Imagine you have a magical toy box with lots of toys inside. Every time you want to play with a specific toy, you need to look through the box to find it. Now, let’s say you have a smart friend who helps you remember where each toy is located. This way, when you want to play with a toy again, your friend tells you exactly where to find it, making it much faster and easier. Well, useMemo is like having that helpful friend for your toys – it helps remember things so you can find them quickly!
Technically:
In React, when we build things, sometimes we need to do complex calculations or operations to get the final result. Now, imagine if every time something on the screen changed, React had to redo all those calculations, even if the inputs didn't change much. It's like doing math homework every time you want to play a game – not very efficient!
Here’s where useMemo comes in. It’s a special tool that tells React to remember the result of a calculation so that if the inputs don’t change, React doesn’t need to recalculate everything. It’s like having a super-smart calculator that only works on new problems, not the same ones you already solved. This makes our apps run faster and smoother because they only do the work that’s really necessary.
Prerequisites:
- A solid understanding of React and JSX.
- Node.js and npm installed on your machine
Implementation:
- Create a React App:
Begin by creating a new React app using CRA.
npx create-react-app text-social-media
cd text-social-media
2. Install Styled Components:
Install Styled Components for managing styling in your React components.
npm install styled-component
3. Create a Post Component:
Design a Post component to represent individual text posts.
Create a `components` folder in `src` folder and create `Post.js` file as shown below:
// Post.js
import React from 'react';
import styled from 'styled-components';
const PostContainer = styled.div`
border: 1px solid #ddd;
padding: 16px;
margin: 16px 0;
border-radius: 8px;
`;
const Post = ({ content, author }) => {
return (
<PostContainer>
<p>{content}</p>
<p>By: {author}</p>
</PostContainer>
);
};
export default Post;
Create `Header.js` file in `src/components` folder:
// Header.js
import React from 'react';
import styled from 'styled-components';
const StyledHeader = styled.header`
background-color: #333;
color: #fff;
padding: 15px 0;
text-align: center;
h1 {
margin: 0;
font-size: 2rem;
}
`;
const Header = () => {
return (
<StyledHeader>
<h1>Text-Only Social Media</h1>
</StyledHeader>
);
};
export default Header;
Create `PostForm.js` file in `src/components ` folder:
// PostForm.js
import React, { useState } from 'react';
import styled from 'styled-components';
const FormContainer = styled.div`
border: 1px solid #ddd;
padding: 16px;
margin: 16px 0;
border-radius: 8px;
`;
const Form = styled.form`
display: flex;
flex-direction: column;
`;
const TextArea = styled.textarea`
margin-bottom: 10px;
padding: 8px;
`;
const Button = styled.button`
background-color: #4CAF50;
color: #fff;
padding: 8px;
cursor: pointer;
&:hover {
background-color: #45a049;
}
`;
const PostForm = ({ onSubmit }) => {
const [content, setContent] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onSubmit(content);
setContent('');
};
return (
<FormContainer>
<Form onSubmit={handleSubmit}>
<TextArea
placeholder="What's on your mind?"
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<Button type="submit">Post</Button>
</Form>
</FormContainer>
);
};
export default PostForm;
4. Create a PostList Component:
Build a PostList component to display a list of posts and allow user to add new posts.
// PostList.js
import React, { useMemo, useState } from 'react';
import Post from './Post';
import PostForm from './PostForm';
const postListData = [
{ id: 1, content: 'Excited to join this text-only platform!', author: 'User1' },
{ id: 2, content: 'Text is the future!', author: 'User2' },
// Add more post data as needed
];
const PostList = () => {
const [posts, setPosts] = useState(postListData);
const handlePostSubmit = (content) => {
const newPost = {
id: posts.length + 1,
content,
author: 'Current User', // In a real app, you might get the user from authentication.
};
setPosts([newPost, ...posts]);
};
const sortedPosts = useMemo(() => {
return posts.sort((a, b) => b.id - a.id);
}, [posts]);
return (
<div>
<PostForm onSubmit={handlePostSubmit} />
{sortedPosts.map((post) => (
<Post key={post.id} {...post} />
))}
</div>
);
};
export default PostList;
The useMemo hook in React is used for memoization, a technique to optimize performance by memoizing the result of expensive calculations. In our example, useMemo is employed within the `PostList` component to sort the postListData array by the post’s ID in descending order. This ensures that the most recent posts are displayed first. Memoization prevents unnecessary recalculations, especially when the component re-renders.
5. Use Components in App:
Integrate the new components into the main App component.
// App.js
import React from 'react';
import { Container } from './Layout';
import Header from './Header';
import PostList from './PostList';
const App = () => {
return (
<>
<Header />
<Container>
<PostList />
</Container>
</>
);
};
export default App;
6.Run the app
Open terminal and run below command to start the app
npm start
You should now see the app.
Live Demo: Codesandbox
Conclusion:
Building a text-only social media website with React, useMemo, and Styled Components showcases the simplicity and power of these technologies. The use of useMemo optimizes the rendering process, ensuring that performance is maintained even with dynamic data. Styled Components provide an elegant and modular way to handle the styling, contributing to a clean and maintainable codebase. This project serves as a foundation for further enhancements and customization based on specific social media requirements.
Check out my YouTube channel for more content:
Next part in the series for building a job portal using React and optimizing its performance with the useCallback hook.
