This content originally appeared on DEV Community and was authored by Sianwa Atemi
Day 1 & 2: Created a simple Todo list
I have a basic knowledge in React and attempted to use that to create a todo list. I learnt how to use React hooks, Portals, the context api (useContext) and other main concepts. The code can be found here Github repo. The live demo here.
Day 3: Optimization in react
React.memo
I learnt that this is a higher order component (a function that takes a component and returns a new component) that is used when your component renders the same value and you want to improve performance.
const Book = (props) => {
// rendering using props
};
export default React.memo(Demo);
Note: If props are passed by reference this will not prevent re-renders, like if an object is passed.
useCallback()
The useCallback() hook is useful when passing callbacks to optimized components. This can be a solution to the problem above. According to the documentation useCallback receives a callback and dependencies that when changed return a memoized version of the callback
Lets say the props in the Book component above receive an object that sometimes changes, like an array of written reviews. The Book's parent component can pass the changing object in a useCallback hook that will result in the Book only getting rendered when the array changes.
const Parent = () => {
// state that detects a change in the review
const [reviewState, setReview] = useState();
// Lets assume this function handles the change of review somewhere
const handlChange = useCallback(() => {
// setReview() to change the reviewstate
}, [reviewState]);
// Book will rerender only when review changes
return (
<>
<Book reviews={reviewState} />
</>
);
};
It will probably look different in the real world but this is just a brief explanation of what I learnt.
useMemo()
This is a hook that returns a memoized value. It is used to avoid rerendering expensive calculations. It accepts a callback and dependencies that when changed recompute the memoized value.
const heavyCalculation = useMemo(() => {
someHeavyCalculation(x, y);
}, [x, y]);
Note: If no dependencies (x and y in the example above) are provided, a new value will be computed on every render.
Today I mostly read the docs and watched some videos to understand these three concepts.
Day 4: Error Boundaries
I learnt that Error boundaries are class components that catch errors in their child components and display fallback UIs. It's kind of like a try catch block but for jsx. To create an error boundary add the componentDidCatch() method in your class component.
class ErrorBoundary extends React.Component {
constructor() {
super();
this.state = { hasError: false };
}
componentDidCatch() {
// change error state
return (this.state = { hasError: true });
}
render() {
if (this.state.hasError) {
return <p>Something went wrong.</p>;
}
return this.props.children;
}
}
// The error can then be displayed in a regular component
<ErrorBoundary>
<SomeComponent />
</ErrorBoundary>
Day 5 and 6: Sending HTTP requests
I learnt how to send HTTP requests in React. I built a small project with unsplash api where users can search for images and get results displayed to them. This is the live demo
This content originally appeared on DEV Community and was authored by Sianwa Atemi
Sianwa Atemi | Sciencx (2022-02-12T17:43:08+00:00) Day 1 – 10. Retrieved from https://www.scien.cx/2022/02/12/day-1-10/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.