Concepts of React — Part 3

📄 Table of Contents

◉ Controlled Component vs UNcontrolled Component

◉ Stateless Component vs Pure Component

//Pure component class Welcome extends React.PureComponent {  
render() {
return <h1>Welcome</h1>
}
}
// Stateless componentHello = () => {
return <h1>Hello</h1>;
}

Conclusion

◉ React Context vs React Redux

◉ e.preventDefault() vs e.stopPropagation vs return false

🔘 event.preventDefault()

🔘 event.stopPropagation()

🔘 return false

Un-normalized data

What if we want to change the information of a user?

Normalizing

Benefits

Normalized State Structure

Redux Selectors

selectUsers = state => state.users;
selectUserIds = state => state.users.map(user => user.id);
selectUserIdsOfName = (state, name) => state.users.filter(user => user.name === name);
// Reducer
function todoApp(state = [], action) {
switch (action.type) {
case GET_ALL_TODOS:
return {
todos: action.data.todos
};
default:
return state;
}
}// Selector
function getIncompleteTodos(state) {
return state.todos.filter((todo) => {
return !todo.completed
});
}
function mapStateToProps(state) {
return {
incompleteTodos: state.todos.filter((todo) => {
return !todo.completed
});
}
}
function mapStateToProps(state) {
return {
incompleteTodos: getIncompleteTodos(state)
};
}

Memoization

Using Reselect selectors

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.